Bootstrap navbar sticky

Question

Szukam tutoriala dla takiego efektu menu bootstrapowego:

https://blackrockdigital.github.io/startbootstrap-agency/

Niestety, póki co nie znalazlem nic podobnego.

Answer 1

Aby navbar był sticky wystarczy dodać klasę navbar-fixed-top, więcej tutaj.

Co do efektu uzyskiwanego po zescrollowaniu:

Zmień background-color navbara na transparent, dodaj transition, a następnie dodaj nową klasę w CSS zawierającą inny background-color oraz height i font-size o większej wartości. Potem w JS po prostu dodajesz tą klasę do navbara po zescrollowaniu powiedzmy 50px. 

W jQuery wyglądałoby to mniej więcej tak:

$(window).scroll(function(){
     if($(this).scrollTop()>50)
    {
         $('.navbar').addClass('klasa');
    }
    else
    {
        $('.navbar').removeClass('klasa');
    }
});

 

Comments

W ktorym miejscu dodac transition ?

---

Dla navbara.

Answer 2

Hej!
Jeśli koniecznie chcesz tutoriala to trzymaj tutaj (po ang.) https://www.youtube.com/watch?v=qep7IWhqdoo, gdybyś wolał po polsku to napisz postaram się coś wyszukać!

Możesz uzyskać taki efekt bez pomocy bootstrapa w bardzo prosty sposób używając position: fixed; i wypozycjonowania elementu na samej górze strony, dzięki właściwościom top i left np.