Zmniejszanie paska nawigacyjnego (nav, header) na stronie na stronie

Zmniejszający się na stronie pasek nawigacyjny (nav, header) to dość często spotykany efekt. Utworzenie go wcale nie wymaga dużego nakładu czasu a jedynie znajomości odpowiednich właściwości. Zazwyczaj uzyskuje się go dzięki CSS i JavaScript (lub innej bibliotece JS często jest to jQuery).

Jak działa efekt zmniejszenia paska nawigacyjnego na stronie?

W praktyce efekt polega na ty, że podczas przewijania strony menu witryny zostaje jak by przyklejone do paska górnego okna przeglądarki (o ile nie jest od samego początku) oraz zajmuje ono mniej miejsca niż wcześniej.

Spowodowane jest to np. ukryciem części elementów nagłówka, zmniejszeniem marginesu lub paginacji, umieszczenie kontenera z menu na wyższej warstwie.

Jak przebiega proces zmniejszenia paska nawigacyjnego?

Na początek mamy pasek nawigacyjny. Nie musi się on znajdować na samej górze strony, może być np. pod banerem. W jego skład mogą wchodzić różne elementy takie jak np.

• menu,
• logo firmy,
• wyszukiwarka,
• linki do mediów społecznościowych,
• lub inne elementy jakie uznamy za potrzebne.

Podczas przewijania strony (skrolowania, scroll) po osiągnięciu pewnej pozycji pasek ulegnie zmianie. To jakie dokładnie będą to zmiany zależy od naszych potrzeb. Zazwyczaj chodzi o zwężenie paska i przypięcie go do belki u góry strony.

Jak uzyskać efekt zmniejszenia paska nawigacyjnego na stronie?

W większości przypadków na początek musimy mieć menu nawigacyjne na stronie oraz możliwość edycji jej plików. W kolejnym kroku trzeba dodać do strony bardzo prosty skrypt JS, który umożliwi nam uchwycenie momentu kiedy będziemy przewijać stronę.

Kod JavaScript

Przykładowo może on wyglądać tak:

<script>
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("navbar").classList.add("top");
  } else {
    document.getElementById("navbar").classList.remove("top");
  }
}
</script>

window.onscroll = function() {scrollFunction()}; funkcja ta będzie rejestrować kiedy skrolujemy stronę, dzięki czemu będzie wiadomo kiedy uruchomić skrypt

if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) – jest to zapytanie sprawdzające czy już na tyle strona została przewinięta by uruchomić kod, w tym wypadku jest to 80 (Uwaga: wartość ta powinna być dostosowana pod stronę)

document.getElementById("navbar").classList.add("top"); – do elementu z ID navbar zostanie dodana klasa top

document.getElementById(„navbar”).classList.remove(„top”); – od elementu z ID navbar zostanie usunięta klasa top

Kod CSS

Teraz potrzebna nam będzie klasa CSS – top. To właśnie z jej pomocą będzie można nadać nowe cechy a dokładniej nadpisać do paska nawigacyjnego. Przykładowo:

.top#navbar{
  padding:20px 10px;
}
.top#navbar .logo{
  font-size:25px;
}

źródło:

https://www.w3schools.com/howto/howto_js_navbar_shrink_scroll.asp