<分区>
标签 javascript jquery css html
<分区>
我在页面顶部有一个对象，当用户滚动到某个点时，我想将其锁定到窗口顶部。到目前为止我有这个工作正常但它有点神经质。 我所说的 jumpy 是指它不会移动，直到用户滚动到那么远然后它跳到我想要锁定对象的点。 当我滚动时，每次移动滚动条时，div 都会上下跳动。
这是我目前所拥有的:
$(window).scroll(function () {
if ($(window).scrollTop() > 165) {
$('#nav_bar').css('top', parseInt($(window).scrollTop() - 165));
}else{
$('#nav_bar').css('top', parseInt($(window).scrollTop()));
}
}
);
.nav{
position:relative;
height:25px;
width:750px;
margin-top:165px;
margin-left:auto;
margin-right:auto;
display:block;
text-align:center;
}
.nav div{
display:inline-block;
height:25px;
}
.nav div div{
float:left;
height:25px;
text-align:center;
display:table-cell;
vertical-align:bottom;
width:auto;
margin-left:10px;
margin-right:10px;
padding-left:5px;
padding-right:5px;
line-height:25px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color:rgba(11,108,138,1.00);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
这是我第一次这样做，所以我确定每次滚动页面时我是否可以帮助跳转，但我在其他网站上看到它运行得非常顺利。 但是我知道 div(head)应该随着页面滚动直到到达那个点，然后完全停在页面顶部。
最佳答案
这个插件可以处理这些情况并且可以正常工作。我建议你试试看。它是开源的，因此如果您在实现过程中发现任何问题，也可以参与其中。
如果您不想使用 headroom.js，我会创建另一个与您正在修复的 div 高度相同的 div，但我会添加“display: none”作为 CSS 规则。然后，在您的 JS 逻辑中，您可以在修复导航时显示它，并在取消导航时再次隐藏它。
或者您可以只向父元素添加一个等于固定导航高度的内边距。
if (viewport.scrollTop() > 148) {
header.css('position', 'fixed').addClass('compressed');
section.css('padding-top', 148);
} else {
header.css('position', 'relative').removeClass('compressed');
section.css('padding-top', 0);
}
其中“header”、“section”和“viewport”是应该用 $('') 定义的变量。
如果您还需要什么，请告诉我。
关于javascript - 滚动时锁定窗口顶部的对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24062358/