JointsWP4 (SASS): Cambio de propiedades en Sticky

TL;DR: ¿Sticky realmente puede 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, el tema se instaló usando Node.js/npm y gulp 4.0. Mis preguntas, en detalle, están marcadas en negrita).

quiero hacer el nav barra pegajosa usando el complemento Sticky de Foundation, pero solo cuando hago clic en un botón. Eso significa que cuando el DOM esté completamente terminado, el nav la barra no debe pegarse “por sí misma”, sino permanecer en su posición superior en el documento. Además, debería desaparecer al desplazarse hacia abajo, pero permanecer mientras se desplaza hacia arriba.

los nav la barra está correctamente envuelta en todo lo necesario divs, por lo que el nav la barra es capaz de 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, cambia el data-btm-anchor a la posición de desplazamiento actual usando JavaScript que se dispara al hacer clic. Esto no funcionó tan bien como me gustaría. Lo que he probado hasta ahora:

1. Cuando usas getElementByID y entonces setAttributela data-btm-anchor en el archivo PHP cambia según Firebug, pero eso no influye en el nav barra un poco; se queda donde está. ¿Necesito “volver a crear una instancia” de Sticky y, de ser así, cómo?
2. los documentos mencion:

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? Cada vez que pasaba un nuevo Foundation.Sticky objeto con nada más que una diferencia btmancla como mi parámetro de matriz de opciones para mi jQuery('#sticky_header')no pasó nada.

3. los documentos también propongo agregar Sticky programáticamente 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 al:

   1. lanzando el .js desde el cual el botón obtiene su función en assets/js/scripts (y luego corriendo gulp)
   2. borrando todas las etiquetas adhesivas de datos de mi <header class="header">por lo que no hay un complemento fijo 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 del encabezado” está algo colapsado, por lo que cubre ligeramente el “contenido”. div abajo. Qué sabes, el encabezado no se pega. ¿Es eso un error?

   Supongamos que funcionaría “brillantemente” ahora, ¿Soy teóricamente capaz de cambiar los atributos desreferenciando var stick o 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 btmAnchor establecido en una nueva posición de desplazamiento). Voy a abrir otra pregunta para esto.

Simplemente puede usar el atributo sticky css en su scss.

En html o php agregue 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 pon la distancia desde la parte superior que necesitas!

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);
    });

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

Para el adhesivo, desea agregar la clase adhesiva solo cuando se desplaza más allá de la primera sección, así 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 puntos de referencia, ahora puede agregar fácilmente la clase fija 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 usa wordpress, pone en cola JQuery automáticamente.

Tienes dos formas de usar JQuery en WordPress.

Use JQuery en su lugar $

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

Usar $ como una variable

También puede usar $ pero debe definir una variable como esta:

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