Ako zúžiť header/navigačný panel po scrollovaní s animáciou

V súčastnosti je veľmi populárný fixný navbar, teda fixná horná navigácia, ktorá sa po scrollovaní zúži celý pás navigácie, resp. zmení sa jej výška. Sám ja ho používam na tejsto stránke.

V tomto článku ti ukážem ako na to pomocou JavaScriptu/jQuery a CSS vlastnosti transition.

V prvom rade potrebuješ vytvoriť nejaký div-header, ktorý bude reprezentovať tvoj panel s navigáciou. Daj aj nejaké <br> tagy aby si mal možnosť scrollovania.
Jeho výšku nastavíš pomocou CSS vlastnosti padding. Použiješ CSS vlastnosť position: fixed a tým pádom musíš nastaviť width: 100% aby si mal pás cez celú šírku stránky. Daj divu nejakú farbu pozadia nech vidíš zúženie efektu.

HTML:

<div id="header">
  Header
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS:

#header{
  position: fixed;
  width: 100%;
  background-color: yellow;
  padding: 30px; 
}

Teraz musíš pridať CSS vlastnosť transition v 3 variáciach, aby bola zabezpečená podpora pre všetky nové moderné internetové prehliadače: Chroma, FireFox, Opera, IE,...

Transition pridá spomalenie zmeny nejakej CSS vlastnosti a keďže neudávame ktorej vlastnosti, tak sa aplikuje na všetky teda na náš padding, ktorý zmeníš v inej class-e o chvíľu. Efekt animácie je napr.: ease-in-out

CSS:

#header{
  position: fixed;
  width: 100%;
  background-color: yellow;
  padding: 30px; 
  transition: 300ms ease-in-out;
  -moz-transition: 300ms ease-in-out;
  -webkit-transition: 300ms ease-in-out;
}

Vytvor teraz class-u napr. .scroll, ktorá sa uplnatní po scrolovaní a mení len padding. Horný a dolný, kde zľava/zprava ostáva 30px ako je pôvodne:

CSS:

#header.scroll{
  padding: 15px 30px;
}

Už len JavaScript, resp. jQuery(p.s.: nezabudni, že musíš mať pripojený jQuery súbor), ktorý sa ti postará o pridanie, odstránenie class-y .scroll po scrollovaní:

JAVASCRIPT:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop(); // actual scrolling position
    var header = $("#header"); // catch div#header

    if (scroll >= 100) { // check actual position
        header.addClass("scroll"); // add .scroll
    } else {
        header.removeClass("scroll"); // remove .scroll
    }
});

 > Otvoriť v JSFiddle <