0

运动流畅的固定版本：http: //jsfiddle.net/66MBH/6/

我一直在到处寻找，但找不到任何可以帮助我的东西，
首先是
Jquery 代码。（不记得我从哪里得到的）

    $(document).ready(function () {  
  var top = $('#socialbookmarks2').offset().top - parseFloat($('#socialbookmarks2').css('marginTop').replace(/auto/, 0));
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    if (y >= top) {
      $('#socialbookmarks2').addClass('fixed');
    } else {
      $('#socialbookmarks2').removeClass('fixed');
    }
  });
});

快速; 当容器的 /div 已经到达时，我该如何停止？、底部边界或其他什么？

解释；
我在自定义“博客”网站上使用代码，类似于 wordpress 博客，社交书签应该从帖子的顶部到底部跟随每篇博客文章，然后在用户有时重新开始下一篇文章滚动到它，

现在，如果我激活它，它会在第一个书签容器（#socialbookmarks2）上运行，然后一直到页面底部，而不是在帖子末尾停止。
每页有10个帖子。
希望它可以理解..如果您查看9gag.com，如果您看到他们的评分和 twitter/facebook 共享框，


我会发现我想要它做的事情。它跟随柱子，然后停在柱子的底部。

谢谢！

4

1 回答 1

1

最终，您的答案是在您的条件中添加另一条语句：

if (y >= top && y < bottom) {
  $('#socialbookmarks2').addClass('fixed');
} else {
  $('#socialbookmarks2').removeClass('fixed');
}

现在，什么是底部？顶部 + 元素的高度。由于我不知道那个元素是什么，我只能举一个粗略的例子：

<div class="blog-item">
    <div class="social-bookmarks"></div>
    <h1>blog title</h1>
    <p>
        content here
    </p>
</div>

您需要考虑社交书签的父级。此外，听众必须在课堂上而不是在身份上。

var bottom = y + $(this).parent().height();

假设这是每个 $('.social-bookmarks') 评估的循环。

有很多方法可以写出来。我只是指出一种方法来实现您作为理论而不是工作示例的效果。为此，您需要尝试一下，如果需要，我可能会更新。

于 2013-04-10T18:00:25.423 回答