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 nav
barra 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 nav
barra 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 nav
barra está correctamente envuelta en todos los div
s requeridos , por lo que la nav
barra 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-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:
- Cuando se usa
getElementByID
y luegosetAttribute
, eldata-btm-anchor
en el archivo PHP cambia de acuerdo con Firebug, pero eso no influyenav
un poco en la barra; se queda donde está. ¿Necesito "reinstalar" Sticky, y si es así, cómo? - 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.Sticky
objeto con nada más que un btmAnchor diferente como mi parámetro de matriz de opciones a mijQuery('#sticky_header')
, no pasaba nada.
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:
- lanzando el .js desde el cual el botón obtiene su función en
assets/js/scripts
(y luego ejecutándosegulp
) - 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 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 stick
o usandojQuery('#sticky_header')
ojQuery('.header')
?- lanzando el .js desde el cual el botón obtiene su función en
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
conjunto en una nueva posición de desplazamiento). Abriré otra pregunta para esto.
var $ = jQuery
o pasarlo llamando al método .ready () de esta manera:jQuery(document).ready(function($){ //your code here with using $ or jQuery });
wp_enqueue_script( 'jquery' );
Sigue siendo el mismo problema que antes, desafortunadamente. ¿O puse jQuery incorrectamente? ¿JointsWP tiene algunas librerías jQuery propias?