JointsWP4 (SASS): modifica delle proprietà in Sticky


100

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.

  1. 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.


1
Durante la ricerca, in realtà non esiste una chiamata di funzione wp_enqueue_script () che accoda esplicitamente jQuery, quindi ora l'ho fatto scrivendo in assets / functions / enqueue-scripts.php: wp_enqueue_script( 'jquery' ); purtroppo è sempre lo stesso problema di prima. O ho accodato jQuery in modo errato? JointsWP ha alcune librerie jQuery proprie?
Samuel LOL Hackson

2
WordPress accoda automaticamente jQuery, non è necessario accodarlo da solo. Inoltre, "jQuery" è corretto, ma $ dovrebbe comunque funzionare. WordPress esegue jQuery in modalità senza conflitti, motivo per cui "jQuery" viene utilizzato al posto di $.
JeremyE

1
Quindi questo significa che scrivere "jQuery" invece di "$" è il modo preferito per farlo e dovrebbe funzionare allo stesso modo? (Sono nuovo su jQuery) (anche, ottimo lavoro su JointsWP, Jeremy! :) Assolutamente lo adoro.)
Samuel LOL Hackson,

1
@SamuelLOLHackson, potresti anche usare "$" in WordPress, tuttavia, o devi assegnargli specificatamente jQuery in questo modo var $ = jQuery:, o passarlo chiamando il metodo .ready () in questo modo:jQuery(document).ready(function($){ //your code here with using $ or jQuery });
Nikola Kirincic

1
Sono molto sorpreso, ho avuto una domanda e ho lasciato 500 taglia per rispondere e ho raggiunto la risposta vera e completa, questa domanda è per 2 anni fa e non ha taglia. grazie per la tua gentilezza.
AmerllicA

Risposte:


1

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!


0

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.


-1

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);
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.