TL; DR: Sticky è effettivamente in grado di reagire alle modifiche fornite tramite JavaScript? Se é cosi, come?
(Il progetto utilizza Foundation 6.2 e WordPress 4.4, tema installato utilizzando Node.js / npm e gulp 4.0. Le mie domande, in dettaglio, sono contrassegnate in grassetto.)
Voglio rendere la nav
barra appiccicosa usando lo Sticky Plugin di Foundation, ma solo quando clicco su un pulsante. Ciò significa che quando il DOM è terminato, la nav
barra non dovrebbe rimanere "da sola", ma rimanere nella sua posizione più alta nel documento. Inoltre, dovrebbe scomparire quando si scorre verso il basso, ma rimanere fermo mentre si scorre verso l'alto.
La nav
barra è avvolta correttamente in tutti i necessari div
, quindi la nav
barra è in grado di attaccarsi. I problemi sorgono con la parte "aggiuntiva". La mia idea era di creare prima un'istanza di Sticky usando 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>
Successivamente, modifica la data-btm-anchor
posizione di scorrimento corrente utilizzando JavaScript che viene attivato al clic. Non ha funzionato come avrei voluto. Quello che ho provato finora:
- Quando si usa
getElementByID
e poisetAttribute
, ildata-btm-anchor
nel file PHP cambia secondo Firebug, ma questo non influenza minimamente lanav
barra; resta dov'è. Devo "ristabilire" Sticky e, in caso affermativo, come? - I documenti menzionano:
L'impostazione delle opzioni con JavaScript implica il passaggio di un oggetto nella funzione di costruzione, in questo modo:
var options = { multiExpand: true, allowAllClosed: false }; var accordion = new Foundation.Accordion($('#some-accordion'), options);
Ciò significa che posso passare nuovi parametri a un'istanza di plug-in già esistente? Ogni volta che ho passato un nuovo Foundation.Sticky
oggetto con nient'altro che un diverso btmAnchor come parametro dell'array di opzioni a my jQuery('#sticky_header')
, non è successo nulla.
I documenti propongono anche di aggiungere programmaticamente Sticky al mio "sticky_header". Se funzionasse, potrei provare a modificare direttamente l'oggetto jQuery. Finora sono stato in grado di associare correttamente il plug-in Sticky alla mia intestazione:
- lanciare il .js da cui il pulsante ottiene la sua funzione
assets/js/scripts
(e quindi eseguiregulp
) - eliminando tutti i tag appiccicosi di dati dal mio
<header class="header">
, quindi non ci sono plug-in appiccicosi registrati nell'intestazione quando il DOM ha terminato il caricamento aggiunta a livello di codice del plug-in:
function button_fire(){ var options = { topAnchor:"1", btmAnchor:"footer:top", marginTop:"1" }; var stick = new Foundation.Sticky(jQuery('.header'), options); }
L'intestazione ora guadagna la classe "appiccicoso" secondo Firebug. Ma ancora non funziona, anzi, presenta dei problemi: lo "spazio dell'intestazione" è un po 'compresso, quindi copre leggermente il "contenuto"
div
sottostante. Cosa sai, l'intestazione non si attacca. È un bug?Supponiamo che ora funzioni "brillantemente", sono teoricamente in grado di modificare gli attributi dereferenziando
var stick
o usandojQuery('#sticky_header')
ojQuery('.header')
?- lanciare il .js da cui il pulsante ottiene la sua funzione
Soprattutto, jQuery non funziona come dovrebbe. Ho avuto molti problemi con l'utilizzo $
nei miei script e non posso, ad esempio, eseguire il destroy()
metodo Sticky per questo motivo (se ha funzionato, potrei aver distrutto un'istanza di Sticky per crearne una nuova con il btmAnchor
set in una nuova posizione di scorrimento). Apro un'altra domanda per questo.
var $ = jQuery
:, o passarlo chiamando il metodo .ready () in questo modo:jQuery(document).ready(function($){ //your code here with using $ or jQuery });
wp_enqueue_script( 'jquery' );
purtroppo è sempre lo stesso problema di prima. O ho accodato jQuery in modo errato? JointsWP ha alcune librerie jQuery proprie?