Menu inne po wczytaniu inne po przewinięciu

[tomaroc]

helo,

 

Spotkał się ktoś z was tutorialem, albo templeatem gdzie menu zachowywało by się tak jak na stronie tvp.info ?

Orientuje się ktoś czy to w oparciu o jakiś powszechnie dostępny framework jest zrobione ?

 

pozdrawiam

 

 

__

E w sumie to już sobie w kodzie podejrzałem.

[ar4]

Poczytaj tutaj... od razu znalazłem to co szukasz: https://www.google.pl/search?site=&source=hp&q=menu+przyklejone+do+g%C3%B3ry+strony&oq=menu+przykleja+si%C4%99+do+&gs_l=hp.3.0.0i22i30.980.11100.0.12585.38.36.2.0.0.0.167.2652.31j5.36.0....0...1c.1.64.hp..0.32.2365...0j0i131j0i19j0i22i30i19j0i13i5i30j0i8i13i30j0i22i10i30j33i21.Jw7wEH-PpCM

[tomaroc]

Poczytaj tutaj... od razu znalazłem to co szukasz

 

tak, ale nie o to mi chodziło - ale dzięki za adres do googla,

bardzo fajna wyszukiwarka

[Pawl]

Wystarczy Ci zwykły JS, który zmienia położenie menu w zależności od tego ile przewiniesz stronę.

 

https://developer.mozilla.org/pl/docs/Web/API/Element/scrollTop

[pbasiak]

Najlepszym rozwiązaniem będzie napisanie krótkiego skrypciku w JS z wykorzystaniem funkcji w powyższym poście. Funkcja ta powinna po przewinięciu dodać klasy CSS. On powinienm być odpowiedzialny za wykonanie animacji (transition) - lżejsze i szybsze dla przeglądarki. Kodem CSS określamy jak powinien wyglądać element po przewinięciu (marginesy, szerokości, ukrycie elementu - opacity itd).

 

callmenick.com/post/animated-resizing-header-on-scroll

Tutaj jest opisane jak to zrobić - tylko należy to zastosować do innych elementów, które mają wykonywać animację.

[maciek257]

<script>
$(window).bind('scroll', function(){
if($(window).scrollTop() > XXX){
$('#menu').addClass('klasa');
}else{
$('#menu').removeClass('klasa');
}
});
</script>

Gdzie:

XXX - ilość pikseli jaka musi być przewinięta od góry, aby zmienić menu

#menu - ID elementu z menu

klasa - klasa definiująca wygląd elementu po przewinięciu XXX pikseli