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

jQuery - przyklejne menu

VPS Starter Arubacloud
+1 głos
632 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 niezalogowany
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 27 marca 2016 przez RedMartin Użytkownik (640 p.)

Pomysł w sumie logiczny. Dzięki!
Teraz się rodzi pytanie jak to zapisać. Zrobiłem tak:

 

if (ScrollY > NavY) {

        $('.nav').addClass('sticky');
        document.getElementById("body").style.margintop = "54px";

 }

Niestety to nie działa. Mogę wiedzieć, jak Ty byś to zapisał? Niestety dopiero zaczynam i nie mam innego pomysłu na zmianę marginesu w kodzie JS

komentarz 27 marca 2016 przez niezalogowany
$("body").css("margin-top", $("nav").height() + "px");
komentarz 27 marca 2016 przez niezalogowany
Dzięki temu, gdy zajdzie potrzeba zmiany wysokości menu, nie trzeba będzie grzebać dodatkowo w javascripcie. Wystarczy zmienić tylko jedną linijkę w CSSie i wszystko działa.
komentarz 27 marca 2016 przez RedMartin Użytkownik (640 p.)
Niestety nadal nie działa. Kombinowałem na kilka sposobów. Żadem błąd nie wyskakuje, ale jednocześnie nic się nie zmienia...

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

		$('.nav').addClass('sticky');
		$('body').css('margin-top', $('.nav').height() + '54px');
		
	} else {
		$('.nav').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
komentarz 28 marca 2016 przez niezalogowany

  <span style="background-color:#00FF00">

ten span, rzeczywiście jest w Twoim kodzie?

komentarz 28 marca 2016 przez RedMartin Użytkownik (640 p.)
Nie używałem żadnego span'a. Nie wiem też zbytnio co on ma wspólnego z powyższym kodem. Wybacz niewiedzę, ale z "tworzeniem stron" mam dopiero 2 tygodnie kontaktu
komentarz 28 marca 2016 przez niezalogowany
Masz tę stronę na sieci? Jak nie to wstaw gdzieś kod HTML, CSS, JS
komentarz 28 marca 2016 przez niezalogowany

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 niezalogowany

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 437 wizyt
pytanie zadane 9 lutego 2016 w JavaScript przez gab123 Mądrala (5,230 p.)
+1 głos
1 odpowiedź 2,969 wizyt
pytanie zadane 10 marca 2017 w JavaScript przez BeSSeSSt Obywatel (1,190 p.)
0 głosów
0 odpowiedzi 461 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...