Question

让我解释一下情况：

相对定位sidebar。滚动到main-content顶部后，此侧边栏变为绝对，然后实时更新到窗口中的顶部位置（窗口的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

你应该使用来自twitter bootstrap的词缀：Bootstrap's affix

Answer 2

这个怎么样：

=＆GT; http://jsfiddle.net/8XVXj/1/或完整示例：http://jsfiddle.net/8XVXj/2/

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

我只在固定位置后添加一次。

Answer 3

如果你想要做所有的Javascript麻烦，因为你有不可预测的标题，并且不知道主要内容的确切位置，它足以将ccs设置为固定并且只是计算开始时的位置。

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

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

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

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

3 个答案: