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

100

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.

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

Samuel LOL Hackson
źródło
1
Po przeszukaniu w rzeczywistości nie ma wywołania funkcji wp_enqueue_script (), które jawnie zakolejkowuje jQuery, więc teraz zrobiłem to, pisząc w plikach asset / functions / enqueue-scripts.php: wp_enqueue_script( 'jquery' ); Niestety nadal ten sam problem co poprzednio. A może nieprawidłowo zakolejkowałem jQuery? Czy JointsWP ma własne biblioteki jQuery?
Samuel LOL Hackson
2
WordPress automatycznie umieszcza jQuery w kolejce, bez konieczności samodzielnego umieszczania go w kolejce. Również „jQuery” jest poprawne - ale $ powinien nadal działać. WordPress uruchamia jQuery w trybie bez konfliktu, dlatego zamiast $ używa się „jQuery”.
JeremyE
1
Czy to oznacza, że ​​pisanie „jQuery” zamiast „$” jest preferowanym sposobem zrobienia tego i powinno działać w ten sam sposób? (Jestem nowy w jQuery) (także wielkie dzieło na JointsWP Jeremy :) uwielbiam go!).
Samuel LOL Hackson
1
@SamuelLOLHackson, możesz też użyć "$" w WordPress, jednak albo musisz konkretnie przypisać do niego jQuery w ten sposób: var $ = jQuerylub przekazać to przy wywołaniu metody .ready () w ten sposób:jQuery(document).ready(function($){ //your code here with using $ or jQuery });
Nikola Kirincic
1
Jestem bardzo zaskoczony, miałem pytanie i zostawiam 500 bounty za odpowiedź i dochodzę do prawdziwej i kompletnej odpowiedzi, to pytanie jest od 2 lat i nie ma nagrody. dziękuję Ci za uprzejmość.
AmerllicA,

Odpowiedzi:

1

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!

Vincent Roy
źródło
0

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.

Jaskeerat Singh Sarin
źródło
-1

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);
Pterrat
źródło