jQuery - przyklejne menu

Question

Dzień dobry!
Właśnie próbuję stworzyć własną stronę i zależy mi na przyklejanym menu. Jednak jest jeden problem, bo jeśli zrobię ".nav" tak jak Pan M. Zelent to się okazuje, że menu "skacze" tzn, przykleja się do górnego paska przeglądarki i cała strona idzie w dół. Nie tak powoli stopniowo, tylko od razu zasłania kilka linijek kolejnego diva/ napisu. Moje pytanie, to jak zmienić ten kod, aby nie było tego przeskoku, żeby łagodnie się zwijało w dół?

Będę wdzięczny za wszelkie podpowiedzi :)

Answer 1

W momencie "przyklejania" się menu, dodawaj do body margin-top, z wysokością, jaką ma twoja nawigacja.

Comments

One Drive:
https://onedrive.live.com/redir?resid=8878C7E4C754473A!216572&authkey=!AOURhlHSltMVEL4&ithint=folder%2ccss

---

w CSS

body{
	background-color: #66CC99;
	font-size: 20px;
	margin: 0	!important;
}

usuń !important, po prostu margin: 0;

JS

$(function() {
	var NavY = $('.nav').offset().top;
	var stickyNav = function() {
		var ScrollY = $(window).scrollTop();

		if (ScrollY > NavY) { 
			$('.nav').addClass('sticky');
			$("body").css("margin-top", $(".nav").outerHeight(true) + "px");
			
		} else {
			$('.nav').removeClass('sticky'); 
			$('body').css('margin-top', '0');
		}
	};
	 
	stickyNav(); 
	$(window).scroll(stickyNav);
});

(Kod jest w strasznym stanie)

---

Ooo! Bardzo dziękuję :-)

Jeśli mogę Cię jeszcze pomęczyć to co robi ten fragment:

$("body").css("margin-top", $(".nav").outerHeight(true) + "px");

Muszę przyznać, że JS jeszcze pewnie na poziomie podstawowym nie znam. Postaram się w przyszłości zachować jego większą czytelność. Przyznam się, że przy tym kodzie strasznie się irytowałem... Muszę też przyznać, że gdyby nie Ty możliwe, że rzucił bym laptopem i zakończył z tym przygodę...
Jeszcze raz bardzo dziękuję :-)

---

Ciesze się, że pomogłem : )

$(".nav").outerHeight(true) + "px"

$(".nav").outerHeight(true)  <- to wypluwa wysokość menu(razem z marginesami i paddingami) jako liczbę - do tego trzeba dodać jednostkę + "px".

W rezultacie po wykonaniu tego kawałka kodu wygląda to tak:

$("body").css("margin-top", "94px");

Dzięki temu nie podajesz tu stałej wartości, tylko JS sam sobie liczy jaką wysokość ma menu i o ile powinien opuścić body, żeby nie było przeskoku.

---

Rozumiem :-)
Jeszcze raz dzięki!