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:
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? 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.
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:
assets/js/scripts
(puis lancer gulp
)
, il n’y a donc pas de plug-in sticky enregistré dans l’en-tête lorsque le chargement du DOM est terminé 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);