JointsWP4 (SASS): Cambio de propiedades en Sticky

TL; DR: ¿Sticky es realmente capaz de reaccionar a los cambios que doy a través de JavaScript? ¿Si es así, cómo?

(El proyecto usa Foundation 6.2 y WordPress 4.4, tema instalado con Node.js / npm y gulp 4.0. Mis preguntas, en detalle, están marcadas en negrita).

Quiero que la navbarra sea pegajosa usando el complemento adhesivo de Foundation, pero solo cuando hago clic en un botón. Eso significa que cuando el DOM está terminado, la navbarra no debería quedarse "por sí sola", sino permanecer en su posición superior en el documento.Además, debería desaparecer cuando se desplaza hacia abajo, pero permanecerá mientras se desplaza hacia arriba.

La navbarra está correctamente envuelta en todos los divs requeridos , por lo que la navbarra puede pegarse. Los problemas surgen con la parte "adicionalmente". Mi idea era crear una instancia de Sticky usando PHP primero:

<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>

Después de eso, cambie data-btm-anchora la posición de desplazamiento actual usando JavaScript que se activa al hacer clic. Esto no funcionó tan bien como me gustaría. Lo que he probado hasta ahora:

1. Cuando se usa getElementByIDy luego setAttribute, el data-btm-anchoren el archivo PHP cambia de acuerdo con Firebug, pero eso no influye navun poco en la barra; se queda donde está. ¿Necesito "reinstalar" Sticky, y si es así, cómo?
2. Los documentos mencionan:

Establecer opciones con JavaScript implica pasar un objeto a la función constructora, así:

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

¿Eso significa que puedo pasar nuevos parámetros a una instancia de complemento ya existente? Siempre que pasaba un nuevo Foundation.Stickyobjeto con nada más que un btmAnchor diferente como mi parámetro de matriz de opciones a mijQuery('#sticky_header') , no pasaba nada.

3. Los documentos también proponen agregar mediante programación Sticky a mi "sticky_header". Si eso funcionó, podría intentar alterar directamente el objeto jQuery. Hasta ahora, he podido vincular el complemento Sticky a mi encabezado con éxito mediante:

   1. lanzando el .js desde el cual el botón obtiene su función en assets/js/scripts (y luego ejecutándose gulp)
   2. eliminar todas las etiquetas adhesivas de datos de mi <header class="header"> , por lo que no hay un complemento adhesivo registrado en el encabezado cuando el DOM ha terminado de cargarse

   3. agregando programáticamente el complemento:

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

   El encabezado ahora gana la clase "pegajosa" según Firebug. Pero todavía no funciona, más bien, falla: el "espacio de encabezado" está algo contraído, por lo que cubre ligeramente el "contenido".div continuación. ¿Qué sabes? El encabezado no se pega. ¿Eso es un error?

   Supongamos que ahora funcionaría "brillantemente", ¿ soy teóricamente capaz de cambiar atributos desreferenciando var sticko usando jQuery('#sticky_header')o jQuery('.header')?

Por encima de todo esto, jQuery no funciona como debería. He tenido muchos problemas con el uso $en mis scripts y no puedo, por ejemplo, ejecutar el destroy()método de Sticky debido a esto (si funcionó, es posible que haya destruido una instancia de Sticky para crear una nueva con el btmAnchorconjunto en una nueva posición de desplazamiento). Abriré otra pregunta para esto.

Puede usar el atributo sticky css en su scss.

En html o php agregue una clase a su componente:

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

y en scss o css:

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

¡Ahora solo ponga la distancia desde la parte superior que necesita!

Prefiere controlar el pegajoso usando jquery por completo.

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

Con esto, puede hacer que un botón lo desplace a cualquier parte de su sitio web.

Para el pegajoso, desea agregar la clase pegajosa solo cuando se desplaza más allá de la primera sección, por lo que:

$(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'
    });

});

Usando el complemento de waypoints, ahora puede agregar fácilmente la clase adhesiva cuando se desplaza más allá de un elemento o sección. El selector de Jquery puede seleccionar por id y clase usando # y. respectivamente.

Si utiliza wordpress, pone en cola JQuery automáticamente.

Tiene dos formas de utilizar JQuery en Wordpress.

Utilice JQuery en lugar de $

Wordpress ejecuta JQuery en su modo sin conflicto, por lo que debe usar Jquery en su lugar $

Tu caso

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

Usa $ como una variable

También puedes usar $ pero tienes que definir una variable como esta:

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