为什么我的粘棒不稳定？
为什么我的粘棒不稳定？
提问于 2014-11-22 20:04:23
我正在学习如何使用CSS和jQuery制作粘条。
代码有点脏，因为为了让粘条正常工作，我需要一长一页。您可以看到代码这里。
要重播这个问题，你得照我说的做。
1)在最新的Firefox或Chrome浏览器中打开页面。
2)将浏览器的滚动条直接拖到页面的末尾(不要停在中间)。你会看到粘条向下滑动，然后向上滑动，最后向下滑动。
3)任意拖动滚动条，问题就会消失。
4)然后刷新页面，在步骤2中执行相同的操作，您将再次看到问题
那真的不是我想要的粘条。我不想让第二步的东西出现。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-11-22 22:05:50
根据w3schools的说法，与其给出sticky_bar元素visibility: hidden;，不如将其设置为display: none;。
注意: slideDown()处理jQuery方法隐藏的元素，并显示: CSS中没有(但不可见性:隐藏)。
您可以看到完整编辑的代码http://pastebin.com/e70ctVGy，也可以在下面运行以查看行为上的差异。
$(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27081898
复制相关文章
相似问题
腾讯云开发者
