DIY #10 Pływające menu po przescrollowaniu strony | DailyWeb.pl - codziennie o sieci

DIY #10 Pływające menu po przescrollowaniu strony

Opublikowano 2 lata temu - 5


Dziś taki mały jubileusz. Już 10 odcinek DIY. Idziemy do przodu, dziś dodamy szczyptę, dosłownie odrobinę, jQuery do naszego kodu. Będąc precyzyjnym to będzie tego 8 linijek.

Muszę zaznaczyć, że sam dopiero uczę się javaScriptu, a także jQuery, więc jestem niemal pewien, że znajdzie się ktoś to może to zrobić lepiej bądź istnieje lepszy sposób, u mnie się sprawdza i działa :)

Co chcemy uzyskać? Menu które pojawi się po przescrollowaniu pewnej odległości na stronie. Jakie plusy niesie za sobą takie rozwiązanie chyba mówić nie trzeba :)  Dużo tego teraz wszędzie i pełno różnego rodzaju skryptów robiących to za nas, ale nie trzeba wiele aby osiągnąć taki efekt samemu, chodź - pokażę Ci.

Na początek stworzymy naszą piaskownicę czyli dwa divy. Pierwszy będzie później miał się scrollować, a drugi pływać u góry po przescrollowaniu minimum 350px tak jak w powyższym przykładzie.
Struktura dość prosta:


<div class="container">
  tu nie jest fajnie
</div>


<div class="one">
  ale tutaj jest
</div>

.container będzie scrollowany a .one będzie naszym elementem pływającym.
Dodajmy im trochę stylu i przedstawmy plan. .one będzie schowany powyżej viewportu. Aby mógł fajnie wysunąć się z góry (no chyba że chcesz z dołu - podmień wtedy kilka właściwości) dodamy mu transition dla uzyskania płynnego przejścia i właściwie tyle.

.container{
  width: 200px;
  height: 3000px;
  background: repeating-linear-gradient(#f2f2f2 , #000000 );
  display: block;
  margin: 0 auto;
  color: #000000;
  text-align: center;
}
.one{
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: #f2f2f2;
  color: #3c3c3c;
  text-align: center;
  position: fixed;
  top: -30px;
  left: 0px;
  transition: top 0.3s ease-in;
}

Dzięki jQ po przescrollowaniu 350px dodamy sobie do .one klasę .active dzięki której będziemy mogli przesunąć nasz div z powrotem do viewportu - na top: 0px;

.one.active{
  top: 0px;
}

Jeśli wrócimy się powyżej 350px klasę .active powiniśmy skasować aby wartość top wróciła do -30px a dzięki transition nasze menu płynnie schowało się nad viewport.

Oto nasze wspomniane 8 linijek jQuery:

function update() {
  if ($(window).scrollTop() > 350) {
    $('.one').addClass('active');
  } else {
    $('.one').removeClass('active');
  }
}
setInterval(update, 500);

Już tłumaczę co tutaj wyczarowałem.
Stworzyłem funkcję update, w której sprawdzam czy okno minęło już minimum 350px od góry i wtedy do .one dodaję tymczasowo klasę .active. Jeśli warunek nie jest spełniony to znaczy że jestem powyżej 350px.active usuwam.

Na koniec aby funkcja nie działała cały czas - no bo po co - ustawiam interwał co ile update ma być wykonywana (czyli sprawdzam czy już użytkownik minął 350px)  na 500 milisekund. Możesz zmienić na 200, 138 czy też 666 - według uznania.

I to tyle :) It's simple. Link do jsfiddle.

 

Masz uwagi? Propozycję? Cokolwiek? Wal śmiało w komentarzach.

Jeśli jeszcze nie widziałeś wcześniejszych odcinków DIY zapraszam pod ten właśnie tag.