JointsWP4 (SASS): modification des propriétés dans Sticky

TL; DR: Sticky est-il réellement capable de réagir aux changements que je transmets via JavaScript? Si c’est le cas, comment?

(Le projet utilise Foundation 6.2 et WordPress 4.4, thème installé avec Node.js / npm et gulp 4.0. Mes questions, en détail, sont en caractères gras.)

Je veux que la barre de nav rest collante en utilisant le plug-in Sticky de Foundation, mais uniquement lorsque je clique sur un bouton. Cela signifie que lorsque tout le DOM est fini, la barre de nav ne doit pas restr “seule”, mais restr dans la position la plus haute dans le document. De plus, il devrait disparaître lors du défilement vers le bas, mais restr en place tout en faisant défiler vers le haut.

La barre de nav est correctement encapsulée dans toutes les div requirejses, de sorte que la barre de nav est capable de coller. Les problèmes se posent avec la partie “supplémentaire”. Mon idée était d’instancier Sticky en utilisant PHP en premier:

 

Après cela, remplacez data-btm-anchor par la position de défilement actuelle à l’aide de JavaScript déclenché par un clic. Cela n’a pas fonctionné aussi bien que je le voudrais. Ce que j’ai essayé jusqu’ici:

  1. Lorsque vous utilisez getElementByID puis setAtsortingbute , le setAtsortingbute data-btm-anchor dans le fichier PHP change en fonction de Firebug, mais cela n’influence pas un peu la barre de nav ; il rest où il est. Dois-je “ré-établir” Sticky, et si oui, comment?
  2. Les documents mentionnés:

La définition des options avec JavaScript implique de passer un object dans la fonction constructeur, comme ceci:

 var options = { multiExpand: true, allowAllClosed: false }; var accordion = new Foundation.Accordion($('#some-accordion'), options); 

Cela signifie-t-il que je peux transmettre de nouveaux parameters à une instance de plug-in existante? Chaque fois que j’ai passé un nouvel object Foundation.Sticky avec rien d’autre qu’un btmAnchor différent en tant que paramètre de tableau d’options pour mon jQuery('#sticky_header') , rien ne s’est produit.

  1. Les docs proposent également d’append par programme Sticky à mon “sticky_header”. Si cela fonctionnait, je pourrais essayer de modifier directement l’object jQuery. Jusqu’à présent, j’ai pu associer le plugin Sticky à mon en-tête avec succès:

    1. lancer les .js à partir desquels le bouton obtient sa fonction dans assets/js/scripts (puis lancer gulp )
    2. Suppression de tous les tags “sticky” de mon
      , il n’y a donc pas de plug-in sticky enregistré dans l’en-tête lorsque le chargement du DOM est terminé
    3. append le plugin par programmation:

       function button_fire(){ var options = { topAnchor:"1", btmAnchor:"footer:top", marginTop:"1" }; var stick = new Foundation.Sticky(jQuery('.header'), options); } 

    L’en-tête gagne maintenant la classe “collante” selon Firebug. Mais ça ne marche toujours pas – plutôt, ça glisse: le “header space” est quelque peu réduit, donc il couvre légèrement la div “content” ci-dessous. Que savez-vous, l’en-tête ne colle pas. Est-ce un bug?

    Supposons que cela fonctionne “brillamment” maintenant, est -ce que théoriquement je peux modifier les atsortingbuts en déréférençant var stick ou en utilisant jQuery('#sticky_header') ou jQuery('.header') ?

Surtout, jQuery ne fonctionne pas comme il se doit. J’ai eu beaucoup de problèmes avec l’utilisation de $ dans mes scripts, et je ne peux pas, par exemple, exécuter la méthode destroy() de Sticky (si cela fonctionnait, j’ai peut-être détruit une instance de Sticky un nouveau avec le btmAnchor mis à une nouvelle position de défilement). Je vais ouvrir une autre question pour cela.

Si vous utilisez wordpress, il met automatiquement JQuery en queue.

Vous avez deux façons d’utiliser JQuery dans WordPress.

Utilisez plutôt JQuery $

WordPress exécute JQuery en mode sans conflit, vous devez donc utiliser Jquery à la place de $

Ton cas

 var options = { multiExpand: true, allowAllClosed: false }; var accordion = new Foundation.Accordion(JQuery('#some-accordion'), options); 

Utilisez $ comme une variable

Vous pouvez aussi utiliser $ mais vous devez définir une variable comme ceci:

 var options = { multiExpand: true, allowAllClosed: false }; var accordion = new Foundation.Accordion($('#some-accordion'), options);