Question

我在页面顶部有一个对象，当用户滚动到某个点时，我想锁定到窗口的顶部。到目前为止，我有这个工作正常，但它有点跳跃。我的意思是跳跃是它不会移动直到用户滚动到目前为止它跳到我想锁定对象的点。当我滚动div时，每次移动滚动条时，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）应该滚动页面直到它到达那个点然后完全停在页面的顶部。

Answer 1

Headroom.js

此插件处理这些情况并且可以正常工作。我建议你试一试。它是开源的，所以如果你在实现它时发现任何问题，你也可以为它做出贡献。

如果你不想使用headroom.js，我会创建另一个与你正在修复的div相同高度的div除了我要添加＆＃34; display：none＆＃34;作为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);
        }

其中＆＃34;标题＆＃34;，＆＃34;部分＆＃34;和＆＃34;视口＆＃34;是应该用$（＆＃39;＆＃39;）定义的变量。

如果您还有其他需要，请告诉我。

在滚动期间锁定窗口顶部的对象

1 个答案: