javascript - 滚动时实时更新绝对定位的div

Question

让我解释一下情况:

有一个相对定位的侧边栏。滚动经过main-content 顶部后，此侧边栏将更改为absolute，然后实时更新到窗口中的顶部位置(窗口的scrollTop)。

问题是它真的很慢而且不稳定(在 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');
  }
});

提前致谢:)

Answer 1

如果您想要解决所有 Javascript 麻烦，因为您有不可预测的 header 并且不知道主要内容的确切位置，那么将 ccs 设置为固定并只计算开始时的位置就足够了。

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

就像这里:http://jsfiddle.net/4amdr/

这是我能想象为什么你不想使用固定顶部并忽略 js 的唯一方法。