php - jquery 固定 div 滚动，平滑移动

Question

编辑:请参阅下面的答案，带有 z-index 和内容的最新版本位于 http://jsfiddle.net/66MBH/6/
滚动回顶部时有一个小错误，第一个侧边栏在到达其起始位置后不会停止， fiddle 中的快速修复是设置 .fixed top:XXpx;超过页眉的高度。
感谢您的帮助，Fbynite!

我有一个 jquery 脚本需要修复，
我对 javascript 知之甚少，有人为我做了这个，
它做我想做的事，
当你滚动时它开始跟随，然后在它到达下一个侧边栏时停止，然后当你继续滚动时下一个栏开始跟随。
但是侧边栏的移动非常跳跃和故障，我不知道该怎么做。

我正在寻找的一个例子是您可以在 http://9gag.com 上的每篇文章中看到的小栏。 ，包含标题、评级和 twitter/facebook 分享的那个。
如果你擅长 jquery，请试一试..
我有这个 fiddle 可以稍微清除它:jsfiddle.net/7KcJb/4
(与我的 9gag 上的那个一样，它只是浮​​动并移出帖子，并带有一些 margin-left: -XXpx;)

$(document).ready(function () {  
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
      $('.socialbookmarks2').each(function(){
          var top = $(this).offset().top - parseFloat($(this).css('marginTop').replace(/auto/, 0));
          var bottom = (top + $(this).parent().height());
        if (y >= top && y < bottom) {
          $(this).addClass('fixed');
        } else {
          $(this).removeClass('fixed');
        }
      });  
  });
});

如果你能修复脚本或者有另一个可以顺利运行的脚本，我会非常高兴!
我对动画运动或其他效果持开放态度，只要它像现在这样流畅且不跳跃即可。
谢谢!

Answer 1

它出现故障/跳动的原因是因为您每次滚动时都删除了类。试试这个:

$('.socialbookmarks2').each(function(){
  var top = $(this).offset().top - parseFloat($(this).css('marginTop').replace(/auto/, 0));
  var bottom = (top + $(this).parent().height());
  if (y >= top && y < bottom) {
    $('.socialbookmarks2').removeClass('fixed');
    $(this).addClass('fixed');
  }
}); 

您还可以更改 y 值中的比较，使 div 过渡更加无缝。但我会让你玩那个。这是一个 fiddle ，http://jsfiddle.net/66MBH/2/ .

例子:

if ( (y+30) >= top && y < bottom)