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

komentarz 15 stycznia 2018 przez Jedras Maniak (54,860 p.)

Kod by się przydał.

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

<html>
<script src="jquery-1.11.3.min.js"></script>
<style>
body {
height: 2000px;
}
.wypychacz {
width:100%;
height:30%;
}
.menu { 	
position: absolute;
width: 100%; 
height:100%;		
}
stfhj{	
width: 99px; 	
position: fixed; 	 	
top: 0px;	
z-index: 0;
}
</style>
</html>
<div class="wypychacz"></div>
<div class="menu">
// tu jest menu
</div>
         
	<script>

	$(document).ready(function() {
	var NavY = $('.menu').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.menu').addClass('stfhj');
	} else {
		$('.menu').removeClass('stfhj'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	
</script>

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

Zmień bloczek na html bo wstawiłeś w plain-text

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

<html>
<script src="jquery-1.11.3.min.js"></script>
<style>
body {
height: 2000px;
}
.wypychacz {
width:100%;
height:30%;
}
.menu {     
position: absolute;
width: 100%; 
height:100%;        
}
stfhj{  
width: 99px;    
position: fixed;        
top: 0px;   
z-index: 0;
}
</style>
</html>
<div class="wypychacz"></div>
<div class="menu">
// tu jest menu
</div>
          
    <script>
 
    $(document).ready(function() {
    var NavY = $('.menu').offset().top;
      
    var stickyNav = function(){
    var ScrollY = $(window).scrollTop();
           
    if (ScrollY > NavY) { 
        $('.menu').addClass('stfhj');
    } else {
        $('.menu').removeClass('stfhj'); 
    }
    };
      
    stickyNav();
      
    $(window).scroll(function() {
        stickyNav();
    });
    });
     
</script>

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

Brakuje kropki dla klasy stfhj w stylach css. Kod działa prawidłowo.

Zamknięcie html w nieprawidłowym miejscu. Brakuje tagów body doctype head.

STRUKTURA DOKUMENTU DO BANI

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

z pośpiechu bo przerabiałem kod bo normalnie miałem to rozbudowane na stronie z plikami .css , zaraz wysle poprawioną wersje

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

Jak poprawisz to będzie działać zgodnie z oczekiwaniem.

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

<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<title>Problem z menu sticky</title>
<meta name="description" content="Menu sticky" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
	body {
	height:200%;
	}
	.sticky {    
	width: 99px;     
	position: fixed;          
	top: 0px;    
	z-index: 0;
	}
	.wypychacz {
	width:100%;
	height:30%;
}
</style>
<script>
	$(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();
	});
	});
</script>  	
</head>
<body>
	<div class="wypychacz"></div>
	<div class="menu">
	<!--  tu jest menu -->
	</div>
</body>
</html>

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

Jak zmniejszysz okno przeglądarki, to ją odśwież. NavY jest zapamiętany przed zmniejszeniem okna.

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

a jak mógłbym dokonać poprawy kodu bez konieczności odświeżania całej strony po zmienieniu wielkości okna

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

Ale to nie przeszkadza. W praktyce nie manipulujesz oknem przeglądarki, tylko otwierasz stronę na innym urządzeniu.

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

a jak mogę napisać kod gdzie ten NavY nie jest zapominany i po zmianie wielkości okna się automatycznie aktualizuje , co muszę dodać do tego kodu w JavaScript , bardzo będę wdzięczny za pomoc bardzo mi na tym zależy tak czy siak

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

resize() jquery

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

Kiedy zamieniam


$(document).ready(function() { 
});

$( window ).resize(function() {
});

to przestaje działać efekt sticky

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

Ja nie napisałem, żebyś tak zrobił.

$(document).ready(function() { 
});

sprawdza czy został wczytany DOM i musi być użyta jeżeli script jest przed html chyba,że umieścisz go tuż przed zamknięciem body to wtedy możesz ją pominąć.

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

To w takim razie gdzie mógłbym dać

$( window ).resize(function() {
});

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ŚĆ.
	});
	});