JointsWP4 (SASS): modifica delle proprietà in Sticky

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 navbarra appiccicosa usando lo Sticky Plugin di Foundation, ma solo quando clicco su un pulsante. Ciò significa che quando il DOM è terminato, la navbarra 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 navbarra è avvolta correttamente in tutti i necessari div, quindi la navbarra è 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-anchorposizione di scorrimento corrente utilizzando JavaScript che viene attivato al clic. Non ha funzionato come avrei voluto. Quello che ho provato finora:

1. Quando si usa getElementByIDe poi setAttribute, il data-btm-anchornel file PHP cambia secondo Firebug, ma questo non influenza minimamente la navbarra; resta dov'è. Devo "ristabilire" Sticky e, in caso affermativo, come?
2. 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.Stickyoggetto con nient'altro che un diverso btmAnchor come parametro dell'array di opzioni a my jQuery('#sticky_header'), non è successo nulla.

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

   1. lanciare il .js da cui il pulsante ottiene la sua funzione assets/js/scripts(e quindi eseguire gulp)
   2. 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

   3. 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" divsottostante. Cosa sai, l'intestazione non si attacca. È un bug?

   Supponiamo che ora funzioni "brillantemente", sono teoricamente in grado di modificare gli attributi dereferenziando var sticko usando jQuery('#sticky_header')o jQuery('.header')?

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 btmAnchorset in una nuova posizione di scorrimento). Apro un'altra domanda per questo.

Puoi semplicemente usare l'attributo css appiccicoso nel tuo scss.

In html o php aggiungi la classe al tuo componente:

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

e in scss o css:

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

Ora basta mettere la distanza dall'alto che ti serve!

Preferisci controllare l'appiccicoso usando completamente jquery.

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

Usando questo puoi far scorrere un pulsante in qualsiasi parte del tuo sito web.

Per lo sticky, vuoi aggiungere la classe sticky solo quando scorri oltre la prima sezione, quindi:

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

});

Utilizzando il plug-in waypoint, ora puoi aggiungere facilmente la classe adesiva quando scorri oltre un elemento o una sezione. Il selettore Jquery può selezionare per id e classe usando # e. rispettivamente.

Se usi wordpress, accoda JQuery automaticamente.

Hai due modi per utilizzare JQuery in Wordpress.

Usa JQuery invece di $

Wordpress esegue JQuery nella sua modalità senza conflitti, quindi devi usare Jquery invece $

Il tuo caso

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

Usa $ come una variabile

Puoi anche usare $ ma devi definire una variabile come questa:

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