我正在学习如何使用 CSS 和 jQuery 制作粘性栏。
代码有点脏，因为为了让粘性栏工作，我需要一个长页面。 可以看到代码here .
要重播这个问题，你需要按照我说的去做。
1) 在最新的 Firefox 或 Chrome 中打开页面。
2) 将浏览器的滚动条直接拖到页面末尾(不要停在中间)。你会看到粘条向下滑动，然后向上滑动，最后向下滑动。
3) 随意拖动滚动条，问题就会消失。
4) 然后刷新页面，做和第2步一样的操作，你会再次看到问题
那真的不是我想要的粘条。我不想让第 2 步中的东西出现。
最佳答案
根据 w3schools ，而不是给 sticky_bar 元素 visibility: hidden;，你必须让它 display: none;。
Note: slideDown() works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden).
您可以看到完整的编辑代码 here或在下面运行它以查看行为差异。
$(document).ready(function()
{
$(window).scroll(function()
{
if($(window).scrollTop() >= 60)
{
$(".sticky_bar").slideDown("slow")
$(".sticky_bar").addClass("sticky_bar_active");
}
else
{
$(".sticky_bar").slideUp("slow");
$(".sticky_nav").removeClass("sticky_bar_active");
}
});
});.sticky_bar p {
display: inline;
font-size: 13px;
padding-right: 6px;
}
.sticky_bar a {
text-decoration: none;
float: left;
}
.sticky_bar {
display: none;
position: fixed;
width: 100%;
height: 65px;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
margin: 0;
border: 0;
padding: 0;
background-color: #000000;
}
.sticky_bar_active {
position: fixed;
width: 100%;
height: 65px;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
.sticky_text {
color: #FFFFFF;
}
.wrapper {
width: 1170px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<nav class='sticky_bar'>
<ul class='wrapper'>
<li>
<a href='#'><div class='sticky_text'><p>Overview</p></div></a>
</li>
<li>
<a href='#'><div class='sticky_text'><p>Details</p></div></a>
</li>
<li>
<a href='#'><div class='sticky_text'><p>Settings</p></div></a>
</li>
</ul>
</nav>
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</body>
</html>关于javascript - 为什么我的 sticky bar 不稳定？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27081898/