如何使页面滚动时物体保持在页面顶部

Question

我遇到了困难，无法理解这个stackoverflow问答：

当滚动时将对象固定在浏览器窗口顶部

我已经将它应用于这个页面

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

我的jQuery：

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

- Michael Rader

---

作为一个附注 - 你有一个 JavaScript 文件的 404 错误; "Failed to load resource: the server responded with a status of 404 (Not Found) http://www.crm-newsletter.com/sites/all/themes/mpc_omega_subtheme/js/animation_MortgagePlannerCRM.js". - Fergus In London

谢谢。这个页面不会被使用，只有内部HTML会用到。 - Michael Rader

Answer 1

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

请重新审查这个内容。以下是您需要的内容。

- Mike Legacy

---

请重新审查一下，这正是您想要的，而且更加清晰流畅（滚动时没有卡顿跳跃）。 - Mike Legacy

@MikeLegacy 这个可行。Chris的例子在Chrome中不太好用，我看到了故障。+1给Mike。 - David Bélanger

没问题，先生！得爱 jQuery。现在我几乎不写纯 JavaScript 了！哈哈。另外，如果您在内容滚动到固定元素的顶部时遇到任何问题，只需在固定元素上设置高 z-index（如9999或其他值）以确保安全。那应该就可以解决了。 - Mike Legacy

我使用了这个逻辑，问题是当我继续向下点击时，滚动值突然减少了！！我在console.log中打印了该值..... class REMOVED fixed scrollTop_val=92 class applied fixed scrollTop_val=16 class REMOVED fixed scrollTop_val=16 - rajeev

Answer 2

编辑：这是解决问题的更好方法，必要时使用position fixed并保持您的CSS不变。

用以下内容替换您的JavaScript：

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

- Chris Carew

---

现在它只是停留在终点处。我想让它停留在那里，然后在到达对象时滚动。 - Michael Rader

有趣，使用哪个浏览器？| 编辑 - 哦。从样式中删除 top: 0px;。在滚动设置之前不要让顶部被设置，或者将其默认设置为 top: 300px 或者大约那个位置。 - Chris Carew

现在它像磁铁一样固定在顶部，而不是当我到达对象时才固定。 - Michael Rader

嘿，在我编辑后。试着看一下被替换的代码，因为它比不断调整“top”CSS具有更少的“口吃”效果。无论如何，祝你好运。 - Chris Carew