Kurs CSS (#3) Rozwijane, przyklejane menu główne (sticky)

2015-06-20 | Mirosław Zelent

W dzisiejszym odcinku serii CSS dowiemy się jak stworzyć na stronie internetowej rozwijane menu główne. I to takie menu, które przy przy scrollowaniu, czy przewijaniu strony przyklei się do górnej krawędzi przeglądarki. Pretty awesome! Trik ten jest stosowany na wielu, wielu stronach internetowych, a jak działa menu główne wie każdy użytkownik komputera. Dlatego jest to bardzo intuicyjne rozwiązanie, świetnie nadaje się do bardzo wielu interfejsów.

Pliki z odcinka (w tym kod JS, templatka html oraz plik pad.png):
Kod jQuery realizujący przyklejanie menu:
<script src="jquery-1.11.3.min.js"></script>

<script>

$(document).ready(function() {
   var stickyNavTop = $('.nav').offset().top;

   var stickyNav = function(){
   var scrollTop = $(window).scrollTop();

   if (scrollTop > stickyNavTop) {
      $('.nav').addClass('sticky');
   } else {
      $('.nav').removeClass('sticky');
   }
   };

   stickyNav();

   $(window).scroll(function() {
      stickyNav();
   });
   });

</script>