przeskakujące sticky menu

pytanie zadane 11 listopada 2018 w HTML i CSS przez YakumoPL Obywatel (1,970 p.)

Cześć! Mój problem to Menu które przeskakuje o kilka px w dół na samym początku scrollowania. Zakłóca to płynność strony. Jest jakiś dobry patent, aby tego uniknąć? Pozdrawiam.

3 odpowiedzi

odpowiedź 11 listopada 2018 przez Sebastian Szyja Bywalec (2,810 p.)

żeby coś zdziałać podaj kod HTML i CSS :)

// bez kodu ciężko coś zdziałać :)

komentarz 11 listopada 2018 przez YakumoPL Obywatel (1,970 p.)

<nav>
<ul>
<li id="home"><a href="#s"><i class="icon-home"></i></a></li>
</ul>
</nav>
<div id="start">
	<div id="logo">s</div>
</div>

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

nav
{
	width: 100%;
	background-color: white;
	color: black;
	height: 50px;
}
.sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1;
	
}
ul
{
	width: 100%;
}
ul > li
{
padding: 2px;
display: block;
}
ul> li :hover
{
		opacity: 0.7;
}
#start 
{
	width: 100%;
	height: 100vh;
	border-bottom: 2px solid black;
	position: relative;
	overflow: hidden;
	background-attachment:fixed;
	background-image: url("img/denise-johnson-463885-unsplash.jpg");
	background-size: 100% 100%;
	opacity:  0.8;
}

#logo
{
width: 100%;
text-align: center;
position: absolute;
top: 50vh;
font-size:80px;	
padding: 10px;
}

odpowiedź 11 listopada 2018 przez Zaqu93 Gaduła (4,850 p.)

ja po prostu dałem position: sticky; ale nie wiem czy to cie zadowala:

<!doctype html>
<head>
	<link rel="stylesheet" href="css.css">
</head>
<body>
	<div class="cont">
		<div class="t1">
			
		</div>
		<div class="t2">
			
		</div>
	</div>
</body>

.cont{
			height: 1000px;
}
.t1{
	height: 5px;
	position: sticky;
	top: 50px;
	left: 0;
	background: #000;
}
.t2{
	height: 100%;
	background-color: #455445;
}