JointsWP4 (SASS): Zmiana właściwości w Sticky

TL; DR: Czy Sticky rzeczywiście jest w stanie reagować na zmiany, które wprowadzam za pomocą JavaScript? Jeśli tak to jak?

(Projekt korzysta z Foundation 6.2 i WordPress 4.4, motyw zainstalowany za pomocą Node.js / npm i gulp 4.0. Moje szczegółowe pytania są zaznaczone pogrubioną czcionką).

Chcę, aby navpasek był lepki za pomocą Sticky Plugin Foundation, ale tylko wtedy, gdy kliknę przycisk. Oznacza to, że po zakończeniu całego DOM, navpasek nie powinien przyklejać się „sam”, ale pozostawać w swoim górnym położeniu w dokumencie. Dodatkowo powinien znikać podczas przewijania w dół, ale trzymać się podczas przewijania w górę.

navPasek jest prawidłowo opakowane wszystkie wymagane divs, więc navbar jest w stanie trzymać. Problemy pojawiają się w przypadku części „dodatkowej”. Mój pomysł był taki, aby najpierw utworzyć instancję Sticky przy użyciu 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>

Następnie zmień na data-btm-anchorbieżącą pozycję przewijania za pomocą JavaScript, który jest uruchamiany po kliknięciu. To nie działało tak dobrze, jak bym chciał. Czego próbowałem do tej pory:

1. Podczas używania getElementByIDa następnie setAttribute, data-btm-anchorw pliku PHP zmienia się zgodnie z Firebug, ale nie wpływa navto trochę na pasek; zostaje tam, gdzie jest. Czy muszę „przywrócić” Sticky, a jeśli tak, to w jaki sposób?
2. W Docs wspomnieć:

Ustawianie opcji w JavaScript wymaga przekazania obiektu do funkcji konstruktora, na przykład:

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

Czy to oznacza, że ​​mogę przekazać nowe parametry do już istniejącej instancji wtyczki? Za każdym razem, gdy przekazywałem nowy Foundation.Stickyobiekt z niczym innym jak innym btmAnchor jako parametrem tablicy opcji do my jQuery('#sticky_header'), nic się nie działo.

3. W docs również zaproponować programowo dodając przyklejony do mojego „sticky_header”. Gdyby to zadziałało, mógłbym spróbować bezpośrednio zmienić obiekt jQuery. Do tej pory udało mi się z powodzeniem powiązać wtyczkę Sticky z moim nagłówkiem:

   1. wrzucenie .js, z którego przycisk pobiera swoją funkcję assets/js/scripts(a następnie uruchomienie gulp)
   2. usunięcie wszystkich znaczników „sticky data” z my <header class="header">, więc nie ma zarejestrowanej wtyczki w nagłówku po zakończeniu ładowania DOM

   3. programowe dodanie wtyczki:

      function button_fire(){
        var options = {
          topAnchor:"1",
          btmAnchor:"footer:top",
          marginTop:"1"
        };
        var stick = new Foundation.Sticky(jQuery('.header'), options);
      }
      

   Nagłówek zyskuje teraz klasę „sticky” według Firebuga. Ale to nadal nie działa - raczej powoduje usterki: „Przestrzeń nagłówka” jest nieco zwinięta, więc nieznacznie zakrywa „zawartość” divponiżej. Co wiesz, nagłówek się nie przykleja. Czy to błąd?

   Załóżmy, że teraz zadziałaby „genialnie”. Czy teoretycznie jestem w stanie zmienić atrybuty poprzez dereferencję var sticklub użycie jQuery('#sticky_header')lub jQuery('.header')?

Przede wszystkim jQuery nie działa tak, jak powinno. Miałem wiele problemów z używaniem $w swoich skryptach i nie mogę z tego powodu na przykład uruchomić destroy()metody Sticky (jeśli zadziałała, być może zniszczyłem instancję Sticky, aby utworzyć nową z btmAnchorzestaw do nowej pozycji przewijania). Otworzę kolejne pytanie.

Możesz po prostu użyć lepkiego atrybutu css w swoim pliku scss.

W html lub php dodaj klasę do swojego komponentu:

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

oraz w scss lub css:

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

Teraz wystarczy ustawić odległość od góry, której potrzebujesz!

Wolę kontrolować sticky całkowicie używając jQuery.

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

Za pomocą tego przycisku możesz przewijać cię do dowolnej części witryny.

W przypadku sticky, chcesz dodać klasę sticky tylko wtedy, gdy przewiniesz poza pierwszą sekcję, więc:

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

});

Korzystając z wtyczki waypoints, możesz teraz łatwo dodać klasę sticky podczas przewijania elementu lub sekcji. Selektor Jquery może wybierać według identyfikatora i klasy za pomocą # i. odpowiednio.

Jeśli używasz wordpress, automatycznie kolejkuje JQuery.

Istnieją dwa sposoby korzystania z JQuery w Wordpress.

Użyj JQuery zamiast $

Wordpress uruchamia JQuery w swoim trybie bez konfliktu, więc musisz użyć Jquery zamiast $

Twój przypadek

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

Użyj $ jak zmiennej

Możesz także użyć $, ale musisz zdefiniować taką zmienną:

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