Question

我目前正在为这个开发网站构建一个滚动共享栏：http://ossian.statenews.com/~matt/statenews-redesign-1.1/docs/article.html

如何让jQuery查找“related-stories”div类并阻止它滚动过去？

这是我到目前为止所拥有的：

$(document).ready(function() {

var $sidebar   = $("#sharebox"),
$window    = $(window),
offset     = $sidebar.offset(),
topPadding = 50;

$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0 

});
}
});
});

Answer 1

所以基本上你只需要滚动共享栏就可以“粘贴”到相关的故事了。你已经到了一半了。与开始滚动时不启动共享栏的方式类似，最后会停止共享栏。

您只需要确定何时冻结滚动共享的情况。

$(document).ready(function() {

  var $sidebar   = $("#sharebox"),
      $window    = $(window),
      offset     = $sidebar.offset(),
      topPadding = 50;

  $window.scroll(function() {
    if($window.scrollTop() > $('.related-stories').offset().top) {
      // basically this is just saying, that if you've scrolled passed the related
      // stories, we are going to force you back in line with them.
      // Edit: This needs to be first because the "else if" case is always true when
      //       this would be true so it never actually fails and calls this code.
      $sidebar.stop().css('marginTop', $('.related-stories').offset().top);
    } else if ($window.scrollTop() > offset.top) {
      $sidebar.stop().animate({
        marginTop: $window.scrollTop() - offset.top + topPadding
      });
    } else {
      $sidebar.stop().animate({
        marginTop: 0 
      });
    }
  });
});

这应该可以解决您的问题。代码可能有点偏，您可能需要稍微玩一下。如果你有任何跟进问题，我会再次检查，但直到今天晚上才会这样。祝你好运！

停止元素滚动浏览jQuery中的某个点

1 个答案: