Problem rešen: Navigacija prilikom skrolovanja

Problem sa kojim smo se nedavno suočili je bio kako da kreiramo navigaciju koja će se pojaviti samo kada se skroluje na gore.

Kako smo ovo rešili?

Prvo smo kreirali HTML za formu, za šta je korišćen Bootstrap. Ovde smo problem rešili koristeći CSS i jQuery.

Neke od korisnih CSS radnja koje bi trebalo naučiti su relativna veličina fonta, kolone, relativno i apsolutno pozicioniranje. Sada možemo nastaviti.

Nakon toga smo kreirali statičku navigaciju i navigaciju koja se pojavljuje kada se skroluje na gore.

<nav class="main-navigation navbar navbar-expand-lg">
  <a class="navbar-brand" href="/"></a>
  <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home <span class="sr-only">(current) </span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">First link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Second link</a>
      </li>
    </ul>
  </div>
</nav>

Kreirali smo dve identične navigacije, jednu ispod druge. Razlika između njih je u tome da jedna treba da se pojavi kada se skroluje na gore i sa drugačijom pozadinom, a druga treba da ostane statična na vrhu stranice.

Da bi se ovo postiglo, ove navigacije moraju imati različite identifikatore (identifiers).

Navigacija koja se pojavljuje prilikom skrolovanja je u klasi ,,.navigation-bar-scroll", dok je statička navigacija u klasi sa drugačijim imenom da se stilovi ne bi pomešali.

Koristili smo sledeći SCSS za navigaciju koja se pojavljuje prilikom skrolovanja:

.navigation-bar-scroll {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  
  &.is-hidden {
    opacity: 0;
    -webkit-transform: translate(0,-60px);
    transition: .5s ease;
  }
  
  &.is-visible {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transition: .5s ease;
  }
}

Zatim smo koristili sledeći jQuery kod da bi implementirali funkciju ,,prikaži prilikom skrolovanja na gore" ("show on scroll up").

   var previousScroll = 0;

   $(window).scroll(function(){

     var currentScroll = $(this).scrollTop();
     
     if (currentScroll > 0 && currentScroll < $(document).height() - $(window).height()){

       if (currentScroll > previousScroll){
         window.setTimeout(hideNav, 300);

       } else if (currentScroll == previousScroll) {
         window.setTimeout(visibleNav, 300);
       }
        else {
         window.setTimeout(showNav, 300);
       }
  
       previousScroll = currentScroll;
     }
     
     /* make the scroll navigation disappear when it is scrolled on top */

     if ($(window).scrollTop() <= 150) {
         $('#navigation-scroll').css('display', 'none');
     } else {
       $('#navigation-scroll').css('display', 'flex');
     }

   });

   function hideNav() {
     $(".main-navigation-scroll").removeClass("is-visible").addClass("is-hidden");
   }
   function showNav() {
     $(".main-navigation-scroll").removeClass("is-hidden").addClass("is-visible");
     $(".main-navigation-scroll").addClass("shadow");
   }

 });

Uspeli smo da napravimo navigaciju koja se pojavljuje prilikom skrolovanja na gore. Ova navigacija će nestati kada se skroluje do vrha, gde će se nalaziti statična navigacija. Izgleda prilično dobro, zar ne?

Evo i jednog saveta za kraj: navigacije bi trebale biti identične da se korisnici ne bi zbunili. Jedina razlika koju možete napraviti jeste da promenite pozadinu za navigaciju koja se pojavljuje prilikom skrolovanja, tako da linkovi za navigaciju budu vidljivi na stranici sa puno sadržaja.

Ovo je samo jedan od načina da poboljšate dizajn vašeg sajta.

Nadam se da vam je pomogao ovaj kratak članak.

Hvala na pažnji! :)