Javascript 滚动时实时更新绝对定位div

让我解释一下情况：

有一个相对的定位的

侧栏

。在滚动过

主要内容的顶部后

此侧边栏变为绝对，然后实时更新到窗口的顶部位置（滚动窗口顶部）

问题是，它真的很慢而且不稳定（在Firefox中），因为它一直在更新。在没有这么多负载的情况下，我如何“实时”更新位置

现在看起来是这样的：

var headerOffset = $('#main-content').offset().top;
$(document).on('scroll', function() {
  if( ($(document).scrollTop() + 15) > $('#main-content').offset().top ){
    $('#sidebar').addClass('fixed');
    $('#sidebar').css('top', ( $(document).scrollTop() - headerOffset) + 15 );
  } else {
    $('#sidebar').removeClass('fixed');
  }
});

---

提前感谢：）

您应该使用twitter引导中的词缀：

这个怎么样：

=>或完整示例：

---

我只添加一次位置固定。

如果你想做所有Javascript的麻烦，因为你有不可预测的标题，不知道主要内容的确切位置，那么将ccs设置为固定，并在开始时计算位置就足够了

var headerOffset = $('#main-content').offset().top;
$('#sidebar').css('top', headerOffset);

就像这里：

---

这是我能想象的唯一一种方法，为什么你不想使用固定顶而不使用js。

你能发布html/css吗？提示：将if（$（document.scrollTop（）+15）>$（'#main content'）.offset（）.top）更改为if（$（document.scrollTop（）+15）>headerOffset）。这样，代码就不必每次滚动时都重新计算主内容元素的偏移量。如需更多帮助，请发布您的html/css或类似Cyril询问的JSFIDLE。啊，是的，滚动时不需要重新计算。非常感谢。这里有一个例子：我知道Bootstrap词缀，但我试图不使用它来解决它。谢谢！：）延迟现在已经过去了，但我仍然感觉这可以做得更好。这里有两条if语句，只是为了看看它是否应该观看滚动，这让人觉得它有点不必要。。谢谢你的解决方案，我会检查它是否正常工作。我只是修复了你的代码，但如果我必须对其进行编码，我会以不同的方式进行，如果是事件，并且没有jquery。如果我的答案行得通的话，多亏了把我的帖子贴成解决方案。延迟现在已经过去了，但我仍然觉得这可以做得更好。代码感觉有点臃肿。。但是谢谢你的解决方案，我会检查它是否正常工作。我不能使用fixed，因为侧边栏在一个灵活的容器中。这里有一个更好地解释这个问题的小提琴：容器有一个宽度并且居中。侧边栏需要保持在容器的右侧。很抱歉我的回复太晚，我睡得太晚：-）好的，我将侧边栏包装在一个具有25%宽度的holder div中，并在调整大小事件中将其宽度调整为holder的宽度，这不应该经常发生。看看这是否是你想要的：注意，前两行脚本不再需要了：哇！非常干净，比其他答案/解决方案好得多。作品完美：）非常感谢！

var headerOffset = $('#main-content').offset().top;
$('#sidebar').css('top', headerOffset);