滚动期间锁定窗口顶部的对象[重复]答案

【问题标题】：Lock an object at the window top during scroll [duplicate]滚动期间锁定窗口顶部的对象[重复]
【发布时间】：2014-06-05 23:29:36
【问题描述】：

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

【问题讨论】：

这是一个小提琴jsfiddle.net/rD497
就像@Bart 说的... css position: fixed 为您提供不随滚动移动的绝对定位。放弃这种 JavaScript 疯狂......它在 IOS 上看起来很糟糕，因为滚动事件仅在滚动完成时发生。在整个滚动过程中，您什么都没有。

标签： javascript jquery css html

【解决方案1】：

Headroom.js

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

如果您不想使用 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”是应该用$('')定义的变量。

如果您还需要什么，请告诉我。

【讨论】：