Przyklejona nawigacja podczas scrolla

Question

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

Answer 1

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.

Comments

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

---

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ć.")

 

Answer 2

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ść.