Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Sticky bar

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Sticky bar

Post 18.08.2017, 22:51:12

Witam,

1) Jak sprawić, aby nagłówek tracił klasę sticky, gdy user zjedzie poza sekcję, w której jest dany nagłówek?
2) Jak zatrzymać nagłówek w takiej pozycji, w jakiej był, gdy user zjechał poza sekcję (domyślnie wędruje na górę)?

http://bakr-test.esy.es/sticky/
Bakr
Posty: 33
Dołączył(a): 04.07.2016

Re: Sticky bar

Post 21.08.2017, 23:32:51

1. Daj zdarzenie mouseout przy którym zmienisz klasę nagłówka. Zakładamy, że element sekcji i nagłówek przypiąłeś do zmiennej:
Kod: Zaznacz cały
wybranaSekcja.addEventListener('mouseout', function() {wybranaSekcja.getElementsByTagName("h1")[0].class = ''});

Dla wielu sekcji po prostu w pętli przypinasz takie zdarzenia. Mniej-więcej tak:
Kod: Zaznacz cały
const elements = document.querySelectorAll("section");
elements.forEach(function(niepotrzebny, index) { elements[index].addEventListener('mouseout', funkcjaZKoduZPowyzszegoListingu)});

(Jeśli są jakieś błędy, napisz, to sprawdzę je nie na kolanie :P)
Jeśli flow sekcji na stronie będzie inny, pobaw się z tym selektorem.

2. Nie rozumiem. Jeśli załączona strona miała coś wyjaśnić, to niestety jest niemal pusta.
kabexxx
Posty: 195
Dołączył(a): 27.11.2011

Re: Sticky bar

Post 24.08.2017, 22:39:34

Aktualnie problem polega na tym, że obiekty dostają klasę fixed, zanim scroll będzie na wysokości sekcji:
http://bakr-test.esy.es/sticky/
Bakr
Posty: 33
Dołączył(a): 04.07.2016


Powrót do JavaScript


Kto przegląda forum

Użytkownicy przeglądający ten dział: Google [Bot] i 5 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50667 zarejestrowanych użytkowników.
Najnowszy użytkownik: RozellaF


Nasi użytkownicy napisali:

  • 936047 wiadomości
  • w 246706 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)