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

TL; DR: Est-ce que Sticky est réellement capable de réagir aux changements que je donne via JavaScript? Si c'est le cas, comment?

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

Je veux rendre la navbarre collante en utilisant le plugin Sticky de Foundation, mais uniquement lorsque je clique sur un bouton. Cela signifie que lorsque le DOM est terminé, la navbarre ne doit pas rester "seule", mais rester en position haute dans le document. De plus, il devrait disparaître lors du défilement vers le bas, mais rester en place lors du défilement vers le haut.

La navbarre est correctement enveloppée dans tous les divs requis , de sorte que la navbarre est capable de coller. Les problèmes se posent avec la partie «supplémentaire». Mon idée était d'instancier Sticky en utilisant d'abord PHP:

<div data-sticky-container>
  <header class="header" role="banner" id="sticky_header" data-sticky data-top-anchor="1" 
    data-btm-anchor="content:top" data-options="marginTop:0;" style="width:100%"
>
    <?php get_template_part('parts/nav', 'offcanvas-topbar'); ?>
  </header>
</div>

Après cela, changez la data-btm-anchorposition de défilement actuelle à l'aide de JavaScript qui est déclenché au clic. Cela n'a pas fonctionné aussi bien que je le souhaiterais. Ce que j'ai essayé jusqu'à présent:

1. Lors de l'utilisation de getElementByIDet ensuite setAttribute, le data-btm-anchordans le fichier PHP change selon Firebug, mais cela n'influence pas navun peu la barre; il reste là où il est. Dois-je "réinstaurer" Sticky, et si oui, comment?
2. Les documents mentionnent:

La définition des options avec JavaScript implique de passer un objet 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 paramètres à une instance de plugin déjà existante? Chaque fois que je passais un nouvel Foundation.Stickyobjet avec rien de plus qu'un btmAnchor différent comme paramètre de mon tableau d'options à my jQuery('#sticky_header'), rien ne se passait.

3. La documentation propose également d'ajouter par programme Sticky à mon "sticky_header". Si cela fonctionnait, je pourrais essayer de modifier directement l'objet jQuery. Jusqu'à présent, j'ai pu lier le plugin Sticky à mon en-tête avec succès en:

   1. lancer le .js à partir duquel le bouton obtient sa fonction assets/js/scripts(puis l'exécuter gulp)
   2. suppression de toutes les balises collantes de données de my <header class="header">, donc il n'y a pas de plug-in collant enregistré dans l'en-tête lorsque le DOM a terminé le chargement

   3. ajout par programme du plugin:

      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 "sticky" selon Firebug. Mais cela ne fonctionne toujours pas - au contraire, il a des problèmes: «L'espace d'en-tête» est quelque peu réduit, donc il couvre légèrement le «contenu» divci-dessous. Que savez-vous, l'en-tête ne colle pas. Est-ce un bug?

   Supposons que cela fonctionne "brillamment" maintenant, suis-je théoriquement capable de modifier les attributs en déréférençant var stickou 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 $dans mes scripts, et je ne peux pas, par exemple, exécuter la destroy()méthode de Sticky à cause de cela (si cela a fonctionné, j'ai peut-être détruit une instance de Sticky pour en créer une nouvelle avec l' btmAnchorappareil sur une nouvelle position de défilement). Je vais ouvrir une autre question à ce sujet.

Vous pouvez simplement utiliser l'attribut sticky css dans votre scss.

En html ou php, ajoutez une classe à votre composant:

<div data-sticky-container class="sticky-container">

et en scss ou css:

.sticky-container {
    position: sticky;
    top: 0;
    z-index: 10; 
}

Maintenant, mettez simplement la distance du sommet dont vous avez besoin!

Préférez contrôler le sticky en utilisant complètement jquery.

$(document).ready(function(){
    $('<Your button>').click(function () {
        $('html, body').animate({scrollTop: $('<where you want to go>').offset().top}, 1000);
    });

En utilisant cela, vous pouvez faire défiler un bouton vers n'importe quelle partie de votre site Web.

Pour le sticky, vous souhaitez ajouter la classe sticky uniquement lorsque vous faites défiler la première section afin:

$(document).ready(function(){
    $(<Section name after which you want sticky to appear>).waypoint(function(direction){
        if (direction == "down"){
           $('nav').addClass('sticky');
           }else{
               $('nav').removeClass('sticky');
           }
    }, {
        offset: '60px'
    });

});

En utilisant le plugin waypoints, vous pouvez désormais ajouter facilement la classe collante lorsque vous faites défiler un élément ou une section. Le sélecteur Jquery peut sélectionner par identifiant et classe en utilisant # et. respectivement.

Si vous utilisez wordpress, il met automatiquement JQuery en file d'attente.

Vous avez deux façons d'utiliser JQuery dans Wordpress.

Utilisez plutôt JQuery $

Wordpress exécute JQuery dans son mode sans conflit, vous devez donc utiliser Jquery à la place $

Ton cas

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

Utilisez $ comme une variable

Vous pouvez également utiliser $ mais vous devez définir une variable comme celle-ci:

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