• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Przyklejona nawigacja podczas scrolla

Aruba Cloud - Virtual Private Server VPS
+1 głos
359 wizyt
pytanie zadane 1 stycznia 2019 w JavaScript przez Bakr Mądrala (6,850 p.)
W jaki sposób sprawić, by nawigacja była przyklejona tylko wtedy, gdy użytkownik scrolluje do góry?

Przykład: https://www.netguru.co

2 odpowiedzi

0 głosów
odpowiedź 1 stycznia 2019 przez rafal.budzis Szeryf (85,520 p.)
Musisz zapisać sobie do zmiennej pozycje scrolla.

potem w evencie on scroll sprawdzasz różnice zapisanego scrolla i obecnego scrolla.

Kierunek scrolowania określa wynik  odejmowania w zależności czy wynikiem jest liczba dodatnia czy ujemna.

na sam koniec zapisujemy nową pozycje scrolla do naszej zmiennej.
komentarz 1 stycznia 2019 przez Bakr Mądrala (6,850 p.)
class Header {

  constructor() {

    if (!this.setVars())
      return

    this.setEvents()

  }

  setVars() {

    this.element = document.querySelector('.header')
    this.scrollPosition = getCurrentScroll();
    if (!this.element)
      return

    this.classes        = {
      notify  : 'header__notify--active',
      sticky  : 'header--sticky'
    }

    return true

  }

  setEvents() {

    document.addEventListener('click', (e) => { this.closeAll() })
    window.addEventListener('load',   () => { this.headerSticky() })
    window.addEventListener('scroll', () => { this.headerSticky() })

  }

  closeAll() {
    this.notifyWrapper.removeClass(this.classes.notify)
  }

  headerSticky() {
    console.log(getCurrentScroll() - this.scrollPosition)
    this.scrollPosition = getCurrentScroll();
    if ((getCurrentScroll() - this.scrollPosition ) < 0) {
      this.element.addClass(this.classes.sticky)
    }
    else {
      this.element.removeClass(this.classes.sticky)
    }
  }

}

W console.log pokazuje mi wynik, który w przypadku scrollowania w górę jest ujemny, a w dół dodatni. Na tej podstawie próbuję dodawać klasy. Niestety te klasy się nie dodają.

komentarz 3 stycznia 2019 przez rafal.budzis Szeryf (85,520 p.)
edycja 3 stycznia 2019 przez rafal.budzis

EDIT: ok zwróciłem uwagę brakuje ci classList ;) powinno być:

this.element.classList.add(this.classes.sticky)

-------------------------------------------------

 

 

Kod wygląda ok :) Może za szybko go uruchamiasz ?

Aby pobrać element poprzez document.querySelector('.header') powinieneś poczekać na event DOM ready lub load strony.

Spróbuj zrobić dla pewności małą zmiane w funkcji setVars.

if (!this.element)
      return

Zamień na 

if (!this.element)
      throw new Error("Za szybko wykonałem kod musze to poprawić.")

 

0 głosów
odpowiedź 1 stycznia 2019 przez Tomek Sochacki Ekspert (227,490 p.)
Przejrzyj sobie podpięte na tej stronie event listenery na scrolla (w devtoolsach), tak na szybko to wydaje mi się, że po prostu zapięli się na scroll dla window i analizują różnicę w pozycji i na tej podstawie określają widoczność.

Podobne pytania

+1 głos
1 odpowiedź 198 wizyt
pytanie zadane 18 listopada 2020 w HTML i CSS przez K4P3K Początkujący (360 p.)
0 głosów
1 odpowiedź 120 wizyt
pytanie zadane 9 października 2021 w JavaScript przez Piotr Błaszczak Bywalec (2,890 p.)
0 głosów
1 odpowiedź 166 wizyt
pytanie zadane 6 maja 2017 w JavaScript przez Bakr Mądrala (6,850 p.)

93,335 zapytań

142,331 odpowiedzi

322,415 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...