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 ブログと同様のカスタム「ブログ」Web サイトでコードを使用しています。ソーシャルブックマークは、各ブログ投稿を投稿の上から下までたどり、ユーザーがスクロールして、

現在、それを有効にすると、最初のブックマーク コンテナ (#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>

ソーシャル ブックマークの親を考慮する必要があります。さらに、リスナーはidではなくクラスにある必要があります。

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

これが各 $('.social-bookmarks') 評価のループにあると仮定します。

これを書き出す方法はたくさんあります。私は、実際の例ではなく、理論としてあなたの効果を達成する方法を指摘しているだけです. そのためには、試してみる必要があり、必要に応じて更新することがあります。

于 2013-04-10T18:00:25.423 に答える