javascript - variable - side nav foundation

JointsWP4(SASS): Cambio de propiedades en Sticky

Question

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

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

Quiero hacer que la barra de nav pegajosa usando el Sticky Plugin de Foundation, pero solo cuando hago clic en un botón. Eso significa que cuando el DOM está terminado, la barra de nav 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 pegarse mientras se desplaza hacia arriba.

La barra de nav está correctamente envuelta en todos los div necesarios, por lo que la barra de nav puede pegarse. Los problemas surgen con la parte "adicionalmente". Mi idea era crear instancias 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 el data-btm-anchor a 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. Al usar getElementByID y luego setAttribute , el data-btm-anchor en el archivo PHP cambia de acuerdo con Firebug, pero eso no influye un poco en la barra de nav ; se queda donde está. ¿Necesito "reinstalar" Sticky, y si es así, cómo?
2. Los docs mencionan:

Establecer opciones con JavaScript implica pasar un objeto a la función de constructor, 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 objeto Foundation.Sticky con nada más que un btmAnchor diferente como mi parámetro de matriz de opciones a mi jQuery(''#sticky_header'') , no pasaba nada.

3. Los docs 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:

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

   3. Agregar mediante programación 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, sino que falla: el "espacio de encabezado" está algo colapsado, por lo que cubre ligeramente el "contenido" div continuación. ¿Qué sabes? El encabezado no se pega. ¿Eso es un error?

   Supongamos que ahora funciona "brillantemente", ¿puedo cambiar teóricamente 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 de $ en mis scripts, y no puedo, por ejemplo, ejecutar el método destroy() de Sticky debido a esto (si funcionó, podría haber destruido una instancia de Sticky para hacer uno nuevo con el btmAnchor configurado en una nueva posición de desplazamiento). Abriré otra pregunta para esto.

Answer 1

Prefiere controlar lo pegajoso usando jquery completamente.

$(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 adhesivo, desea agregar la clase adhesiva solo cuando se desplaza más allá de la primera sección, de modo 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 Jquery puede seleccionar por id y clase usando # y. respectivamente.

Answer 2

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

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

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

Answer 3

Simplemente puede usar el atributo css adhesivo 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 coloca la distancia desde la parte superior que necesitas!