• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

jQuery - przyklejne menu

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
+1 głos
437 wizyt
pytanie zadane 26 marca 2016 w JavaScript przez RedMartin Użytkownik (640 p.)
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 :)

1 odpowiedź

+3 głosów
odpowiedź 26 marca 2016 przez argeento VIP (111,000 p.)
wybrane 28 marca 2016 przez RedMartin
 
Najlepsza

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

komentarz 28 marca 2016 przez argeento VIP (111,000 p.)

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)

komentarz 28 marca 2016 przez RedMartin Użytkownik (640 p.)

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ę :-)

komentarz 28 marca 2016 przez argeento VIP (111,000 p.)

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.

komentarz 28 marca 2016 przez RedMartin Użytkownik (640 p.)
Rozumiem :-)
Jeszcze raz dzięki!

Podobne pytania

–1 głos
2 odpowiedzi 354 wizyt
pytanie zadane 9 lutego 2016 w JavaScript przez gab123 Mądrala (5,230 p.)
+1 głos
1 odpowiedź 2,450 wizyt
pytanie zadane 10 marca 2017 w JavaScript przez BeSSeSSt Obywatel (1,190 p.)
0 głosów
0 odpowiedzi 407 wizyt

89,777 zapytań

138,386 odpowiedzi

309,501 komentarzy

59,681 pasjonatów

Advent of Code 2022

Top 15 użytkowników

  1. 1088p. - Argeento
  2. 1032p. - nidomika
  3. 1024p. - rucin93
  4. 1020p. - Michal Drewniak
  5. 1014p. - Łukasz Eckert
  6. 1006p. - Mikbac
  7. 988p. - TheLukaszNs
  8. 963p. - JMazurkiewicz
  9. 960p. - adrian17
  10. 945p. - Jarosław Roszyk
  11. 941p. - Hubert Chęciński
  12. 920p. - Mawrok
  13. 914p. - overcq
  14. 859p. - ssynowiec
  15. 848p. - Adam Salamon
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...