Problem z menu sticky

pytanie zadane 15 stycznia 2018 w HTML i CSS przez SzukającyPrzygód Bywalec (2,310 p.)
zamknięte 17 stycznia 2018 przez SzukającyPrzygód

Witam

Mam ostatnio taki problem z menu sticky a chodzi o samą funkcję sticky wspieraną przez JavaScript , ogólnie menu jest w divie "menu" a ten div jest wypychany przez drugi div "wypychacz" który jest powyżej tego diva "menu" gdzie jest menu i wszystko ładnie gra , div "menu" z menu przykleja się wtedy jak jego górna krawędź spotka się z krawędzią ekranu użytkownika , a kiedy dam w jednostce procentowej wysokość diva "wypychacz" który ma wypychać diva "menu" to przy zmianie wysokości przeglądarki zmienia się wysokość diva "wypychacz" i div "menu' przykleja się do krawędzi ekranu tak jakby div "wypychacz" nie zmienił swojej wysokości przy zmieni wysokości ekranu użytkownika i w czym jest problem , bardzo mi na tym zależy by ten problem wyeliminować

komentarz zamknięcia: uzyskanie odpowiedz

Pokaż 16 poprzednich komentarzy

komentarz 16 stycznia 2018 przez pablop76 VIP (123,180 p.)

stickyNav() to funkcja która musi być odpalona gdy wykryty zostanie rezize.

komentarz 16 stycznia 2018 przez pablop76 VIP (123,180 p.)

W twoim kodzie jest odpalana raz gdy wczytano DOM , drugi raz dgy zachodzi scroll, i musisz dołożyć gdy resize

komentarz 16 stycznia 2018 przez SzukającyPrzygód Bywalec (2,310 p.)

A jak to bedzie wyglądało w kodzie JavaScript co podałem ,ten kod co odpowiedzialny jest za sticky , zbytnio nie wiem w jakim momencie mam poprawic ten kod

komentarz 17 stycznia 2018 przez pablop76 VIP (123,180 p.)

	$(document).ready(function() {
	var NavY = $('.menu').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.menu').addClass('sticky');
	} else {
		$('.menu').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
		$(window).resize(function() {
		NavY = $('.menu').offset().top; //GDY ZACHODZI ZMIANA ROZMIARU ONA USTAWIA NOWA WARTOŚĆ.
	});
	});