如何保持页面上的对象随页面顶部滚动答案

【问题标题】：How to keep object on page scrolling with the top of the page如何保持页面上的对象随页面顶部滚动
【发布时间】：2012-06-27 05:02:25
【问题描述】：

我在关注这个 stackOverflow 问答时遇到了问题：

Fix object to top of browser window when scrolling

我已经将它应用到这个this page

为什么我的对象没有像应有的那样附加到顶部，然后在页面滚动回顶部时被正确替换？

我的 jQuery：

$(window).scroll(function () {
    if ($(window).scrollTop() > 200) {
        $('#contentNavigation').css('top', $(window).scrollTop());
    }
}
);

【问题讨论】：

附带说明 - javascript 文件出现 404 错误； “加载资源失败：服务器响应状态为 404（未找到）crm-newsletter.com/sites/all/themes/mpc_omega_subtheme/js/…”。
谢谢。这个页面不会被使用，只有内部的 HTML。

标签： jquery css

【解决方案1】：

http://jsfiddle.net/mikelegacy/tXBHT/

请重新审核。这就是你想要的。

【讨论】：

请重新查看，这是您想要的，而且更干净（滚动时不会出现断断续续的跳跃）
@MikeLegacy 这是有效的。 Chris 的示例在 Chrome 中效果不佳。我看到了故障。为迈克 +1
没问题，先生！一定要喜欢 jQuery。我现在几乎从不写纯 Javascript！哈哈。此外，如果您在内容滚动到该 FIXED 元素顶部时遇到任何问题，只需在 FIXED 元素（如 9999 或其他内容）上设置高 z-index 以确保安全。那应该可以解决它。
我用了这个逻辑，问题是我继续向下点击，滚动值突然变小了！！我在 console.log 中打印了值..... class REMOVED fixed scrollTop_val=92 class applied fixed scrollTop_val=16 class REMOVED fixed scrollTop_val=16

【解决方案2】：

编辑：这是解决问题的更好方法，必要时使用固定位置，不要管你的 CSS。

用这个替换你的javascript：

$(window).scroll(function () {    
if ($(window).scrollTop() > 200) {
    $('#contentNavigation').css('position', 'fixed').css('top','0px');    }
else { 
    $('#contentNavigation').css('position', 'relative').css('top','0px');
}});

【讨论】：

现在它卡住了。我想留在原地，然后在到达对象时滚动。
有意思，用什么浏览器？ |编辑 - 哦。从样式中删除 top: 0px;。在滚动设置之前不要让顶部设置，或者将其默认为top: 300px 或附近的某个地方。
好的，现在它像磁铁一样粘在第一个卷轴上，而不是当我到达对象时。
嘿，在我编辑之后。尝试查看替换的代码，因为与不断调整“顶部”css 相比，它具有更少的“口吃”效果。不管怎样，祝你好运