0

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

脚本需要修复然后随着您继续滚动，下一个栏开始跟随。 但是侧边栏的移动非常跳跃和小故障，我不知道该怎么做。





我正在寻找的一个例子是您可以在http://9gag.com上的每个帖子中看到的小栏，其中包含标题、评级和 twitter/facebook 共享。
如果你对 jquery 很好，请试一试..
我有这个小提琴来清除它：jsfiddle.net/7KcJb/4
（与 9gag 上的一样，我的只是浮动并移出了帖子一些左边距：-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');
        }
      });  
  });
});

如果您可以修复脚本或拥有另一个可以顺利运行的脚本，我将非常高兴！
我对动画运动或其他效果持开放态度，只要它像现在一样流畅而不是跳跃。
谢谢！

4

2 回答 2

2

它出现故障/跳跃的原因是因为您每次滚动时都会删除课程。尝试这个：

$('.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 过渡更加无缝。但我会让你玩这个。这是一个小提琴，http://jsfiddle.net/66MBH/2/。

例子：

if ( (y+30) >= top && y < bottom)
于 2013-04-11T09:13:23.087 回答
0

var elm=$(this);您可以通过第一次查找和更改$(this)同一范围内的所有后续内容来使其更流畅，就像var top = elm.offset().top - parseFloat(elm.css(... 现在您的代码必须重新查找并重新查找$(this)是什么

于 2013-04-11T09:25:31.327 回答