2

スタック、

基本的には、techcrunchや基本的にブログのように、複数の投稿を積み重ねたホームページが必要です。投稿ごとに、スクロールすると投稿の横のページに浮かぶサイドバーボックスが必要です。これにより、ユーザーはFacebookのようなボタンなどを使用して、上にスクロールしなくても投稿を簡単に共有できます。ポスト。

人が各投稿の一番下に到達すると、サイドバーが画面から浮き上がるのを停止し、ペソンが次の投稿までスクロールし続けると、次の投稿のサイドバーが浮き始めます。

完璧な例は9gag.comのホームページです。投稿のタイトル、お気に入りのボタン、ソーシャルボタンが、各投稿/写真の横に浮かんでいることに注目してください。

これを実現するためにjqueryのscrolltofixedプラグインを使用しようとしていますが、行き詰まります。サイドバーのdivでページを正しくスクロールし始めることはできますが、各投稿の下部に到達したときにスクロールを停止することはできないため、サイドバーのdivは互いに重なり始めます。

通常、次のようにscrolltofixedに組み込まれている「limit」属性を使用してスクロールを停止します。

$('.class-of-sidebar-box-div').scrollToFixed({
limit: 3000
});

これにより、3000ピクセル下にスクロールすると、サイドバーボックスが画面とともにスクロールしなくなります。

私がやろうとしたのは、付随する各ポストの高さ+付随するポストの上部オフセットの制限を動的に設定することでした-サイドバーボックスの下部に到達したときに各サイドバーボックスがスクロールしないようにするために、サイドバーボックスの高さ付随する投稿。

コード例：

$('.class-of-sidebar-box-div').scrollToFixed({
limit: function(){
    var postoffset = $(this).siblings('.accompanying-post-class').offset().top;
    var postheight = $(this).siblings('.accompanying-post-class').height();
    var sidbardivheight = $(this).height();
    var scrolllimit = postoffset + postheight - sidbardivheight ;
    return scrolllimit;
    }
});

これは失敗しています。サイドバーボックスは正しく浮き始めますが、「制限」が正しく設定されていません。

私が間違っているアイデアはありますか？

更新：Brilliandによって提案されたサンプルコードを修正しました。ただし、制限はまだ設定されていません。さらに、次のような単純な関数を試しましたが、機能しませんでした。

失敗した簡単な例：

$('.class-of-sidebar-box-div').scrollToFixed({
limit: function(){
    var scrolllimit = 1000;
    return scrolllimit;
    }
});

考え？

4

2 に答える 2

4

このフィドルを見てください：http：//jsfiddle.net/y3qV5/760/。

上記のscrolltofixedプラグインを使用しています：https ：//github.com/bigspotteddog/ScrollToFixed

残念ながら、現時点では制限オプションは機能しません。素晴らしいアイデアですが、次のバージョンにはそれが必要です。

編集：プラグインの最新バージョンは、関数および値として「制限」をサポートするようになりました。

上で説明したのと同様の効果を得るために私が行ったことは、上で説明したように、次のセクションのoffset（）。topからサイドバーの高さを差し引いたパディングに制限を設定することです。制限オプションが関数を受け入れないことを知っていると、混乱を助長します。

$(document).ready(function() {
    $('#cart1').scrollToFixed({
        marginTop: 10,
        limit: $('#p2').offset().top - $('#cart1').height() - 10
    });
    $('#cart2').scrollToFixed({
        marginTop: 10,
        limit: $('#p3').offset().top - $('#cart2').height()
    });
});

そして、以下のコメントで述べたように、カートを繰り返し処理して、それぞれのdivの横にカートを設定する方法を次に示します。

$(document).ready(function() {
    for (i = 1; i <= $('.cart').length; i++) {
        $('#cart' + i).scrollToFixed({
            marginTop: 10,
            limit: $('#p' + (i + 1)).offset().top - $('#cart' + i).height() - 10
        });
    }
});
于 2012-06-19T23:37:31.883 に答える
0

.scrollTop()は間違った機能です。ユーザーが下にスクロールすると増加し、実際に制限に達することができなくなります。scrollToTopのドキュメントを見ると、必要なのはです$(this).siblings('.accompanying-post-class').offset().top。

于 2012-06-12T01:20:10.923 に答える