1

私は現在、この開発 Web サイトのスクロール共有バーを作成しています: http://ossian.statenews.com/~matt/statenews-redesign-1.1/docs/article.html

jQuery で「関連記事」の 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 

});
}
});
});
4

1 に答える 1

2

したがって、基本的には、下にスクロールすると、スクロールする共有バーが関連するストーリーに「固執」するだけです。あなたはすでに道半ばです。最初にスクロールから共有バーを開始しないのと同じ方法は、最後にスクロールを停止する方法と似ています。

スクロール共有をフリーズしたい場合を判断するだけです。

$(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 
      });
    }
  });
});

これで問題は解決するはずです。コードが少しずれている可能性があり、少しいじる必要があるかもしれません。フォローアップの質問があるかどうかもう一度確認しますが、それは今晩までありません. 幸運を！

于 2012-08-23T19:38:19.360 に答える