我是 html 和 jquery 的新手。很抱歉代码写得不好。我设计了一个滚动触发的导航栏，它在使用 jquery 完成一些滚动后修复，就像在 w3school.com 上一样。但是有一些小故障，如果你滚动使用鼠标然后在导航栏固定之前有一点延迟或有点 SCSS ，在稳定滚动时观察到它。我希望你们理解我想说的。 我想达到这样的平滑度:- http://www.w3schools.com/css/default.asp
Jquery代码写在最后:-
<!DOCTYPE html>
<html>
<head><title>home</title>
<style> <!-- css css css css css css-->
*{box-sizing:border-box}
body{margin:0}
div.header{margin:0
padding:0
max-width:100%;
height:auto;
background-color:black;
}
img.header{width:100%;
display:block;
}
nav.fixed{position:fixed;top:0;width:100%;z-index:10}
nav{background-color:#4CAF50;z-index:10}
nav a{display:inline-block;
text-decoration:none;
color:white;
padding:15px 25px;
margin:0;margin-right:-4px; transition-duration: 0.4s;
}
nav a:hover{background-color:white;
color:black;
}
div.sidebar{
width:200px;
float:left;
height:700px;
background:gray;
padding:5px;
overflow-y:scroll;
}
div.sidebarFixed{position:fixed;top:38px;}
div.section{width:65%;position:relative;left:200px;
height:2000px;
background:#f2f2f2;}
</style> <!--css css css css css css css-->
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div class="header">
<img class="header" src="images/top.jpg" alt="journal of advance science & environment" />
</div>
<nav class="nv" id="n">
<a href="#">menu one</a>
<a href="#">menu two</a>
<a href="#">menu three</a>
<a href="#">menu one</a>
<a href="#">menu one</a>
</nav>
<div class="section">
</div>
<script>
jQuery(document).ready(function(){
var navOffset=jQuery("nav").offset().top;
jQuery("nav").wrap('<div class="placeholder" ></div>');
jQuery("div.placeholder").height(jQuery("nav").outerHeight());
jQuery(window).scroll(function(){
var scrollPos=jQuery(window).scrollTop();
if(scrollPos >= navOffset){
jQuery("nav").addClass("fixed");
jQuery(".sidebar").addClass("sidebarFixed");
}else{
jQuery("nav").removeClass("fixed");
jQuery(".sidebar").removeClass("sidebarFixed");
}
});
})
</script>
</body>
</html>
最佳答案
我不认为你所拥有的真的有任何问题。我确实发现了你的 css 的几个语法问题(缺少分号等等)，在修复这些问题之后，它似乎在我这边工作正常。我做的另一件事是将您的样式从内联中分离到一个外部工作表中，这使它更具可读性。
jQuery(document).ready(function(){
var navOffset=jQuery("nav").offset().top;
jQuery("nav").wrap('<div class="placeholder" ></div>');
jQuery("div.placeholder").height(jQuery("nav").outerHeight());
jQuery(window).scroll(function(){
var scrollPos=jQuery(window).scrollTop();
if(scrollPos >= navOffset){
jQuery("nav").addClass("fixed");
jQuery(".sidebar").addClass("sidebarFixed");
}else{
jQuery("nav").removeClass("fixed");
jQuery(".sidebar").removeClass("sidebarFixed");
}
});
})*{
-webkit-box-sizing:border-box;
moz-box-sizing:border-box;
ms-box-sizing:border-box;
box-sizing:border-box
}
body{
margin:0
}
div.header{
margin:0;
padding:0;
max-width:100%;
height:auto;
background-color:black;
}
img.heaer{
width:100%;
display:block;
}
nav.fixed{
position:fixed;
top:0;
width:100%;
z-index:10
}
nav{
background-color:#4CAF50;
z-index:10
}
nav a{
display:inline-block;
text-decoration:none;
color:white;
padding:15px 25px;
margin-right:-4px;
transition-duration: 0.4s;
}
nav a:hover{
background-color:white;
color:black;
}
div.sidebar{
width:200px;
float:left;
height:700px;
background:gray;
padding:5px;
overflow-y:scroll;
}
div.sidebarFixed{
position:fixed;
top:38px;
}
div.section{
width:65%;
position:relative;
left:200px;
height:2000px;
background:#f2f2f2;
} <!DOCTYPE html>
<html>
<head>
<title>home</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div class="header">
<img class="header" src="images/top.jpg" alt="journal of advance science & environment" />
</div>
<nav class="nv" id="n">
<a href="#">menu one</a>
<a href="#">menu two</a>
<a href="#">menu three</a>
<a href="#">menu one</a>
<a href="#">menu one</a>
</nav>
<div class="section">
</div>
</body>
</html>与 w3schools 相比，它的工作原理似乎差不多。不过，我会考虑重组您的一些标记。特别是你的导航列表。
关于javascript - 滚动完成后，如何防止滚动触发的固定导航栏突然跳动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39538639/