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 nav
pasek był lepki za pomocą Sticky Plugin Foundation, ale tylko wtedy, gdy kliknę przycisk. Oznacza to, że po zakończeniu całego DOM, nav
pasek 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ę.
nav
Pasek jest prawidłowo opakowane wszystkie wymagane div
s, więc nav
bar 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-anchor
bieżą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:
- Podczas używania
getElementByID
a następniesetAttribute
,data-btm-anchor
w pliku PHP zmienia się zgodnie z Firebug, ale nie wpływanav
to trochę na pasek; zostaje tam, gdzie jest. Czy muszę „przywrócić” Sticky, a jeśli tak, to w jaki sposób? - 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.Sticky
obiekt z niczym innym jak innym btmAnchor jako parametrem tablicy opcji do my jQuery('#sticky_header')
, nic się nie działo.
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:
- wrzucenie .js, z którego przycisk pobiera swoją funkcję
assets/js/scripts
(a następnie uruchomieniegulp
) - 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 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ść”
div
poniż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 stick
lub użyciejQuery('#sticky_header')
lubjQuery('.header')
?- wrzucenie .js, z którego przycisk pobiera swoją funkcję
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 btmAnchor
zestaw do nowej pozycji przewijania). Otworzę kolejne pytanie.
źródło
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?var $ = jQuery
lub przekazać to przy wywołaniu metody .ready () w ten sposób:jQuery(document).ready(function($){ //your code here with using $ or jQuery });
Odpowiedzi:
Możesz po prostu użyć lepkiego atrybutu css w swoim pliku scss.
W html lub php dodaj klasę do swojego komponentu:
oraz w scss lub css:
Teraz wystarczy ustawić odległość od góry, której potrzebujesz!
źródło
Wolę kontrolować sticky całkowicie używając jQuery.
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:
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.
źródło
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
Użyj $ jak zmiennej
Możesz także użyć $, ale musisz zdefiniować taką zmienną:
źródło