0

このウェブサイトがどのようにしてスティッキー サイドバーを作成したかを理解しようとしています。位置が固定されたサイドバーを作成する方法に関する jQuery チュートリアルはたくさんありますが、長いサイドバーの問題に具体的に対処しているものはありません。

これまでに思いついた最良のコードは次のとおりです。

$(function () {
var lst = 0;
var height = $('.sidebar').height();
var offset = $(".sidebar").offset();
$(window).scroll(function () {
    if ($(window).scrollTop() > lst) { //downscroll
        if ($(window).scrollTop() > offset.top) {
            $(".sidebar").stop().animate({
                marginTop: $(window).scrollTop() - 100
            });
        } else {
            $(".sidebar").stop().animate({
                marginTop: 0
            });
        }
    } else { //upscroll
        if ($(window).scrollTop() < offset.top) {
            $(".sidebar").stop().animate({
                marginTop: 0
            });
        }
    }
    lst = $(window).scrollTop();
});
});

ここでJsfiddle 。誰かが私を正しい方向に向けるのを手伝ってくれれば幸いです。ありがとう！

4

2 に答える 2

1

2年後にこの投稿を再開して申し訳ありませんが、長い/巨大なサイドバーを貼り付ける方法を探している人にとっては役立つでしょう. コードをリサイクルすると、2 行を調整するだけで目的の効果が得られます。

$(function () {
    var lst = 0;
    var height = $('.sidebar').height();
    var offset = $(".sidebar").offset();
    $(window).scroll(function () {
        if ($(window).scrollTop() > lst) { //downscroll
            if ($(window).scrollTop() > offset.top) {
                $(".sidebar").stop().animate({
                    marginTop: $(window).scrollTop() - 100
                });
            } else {
                $(".sidebar").stop().animate({
                    marginTop: 0
                });
            }
        } else { //upscroll
            if ($(window).scrollTop() < offset.top) {
                $(".sidebar").stop().animate({
                    marginTop: $(window).scrollTop()
                });
            }
        }
        lst = $(window).scrollTop();
        offset = $(".sidebar").offset();
    });
});

通常は css プロパティposition: fixedと を交互にコード化position: relativeしますが、スクロールしてサイドバーを停止したい場合 (投稿/ページを編集するときのワードプレスのように)、このプロパティが私たちの css と互換性がない場合の別のバージョンを次に示します。

$(function () {    
    var lst = 0;
    var sidebar = $('.sidebar');
    var container = sidebar.parent('div').height()+400;
    var height = sidebar.height();
    var offset = sidebar.offset();
    $(window).scroll(function () {
        if ($(window).width()>768) {
            if ($(window).scrollTop() > lst) { //downscroll
                var bottom_trigger = parseFloat(sidebar.css('paddingTop')) + parseFloat(offset.top) + height;
                if (($(window).scrollTop()+$(window).height()) > (bottom_trigger) && ($(window).scrollTop()+$(window).height()) < container) {
                    sidebar.css("padding-top", "+=" + ($(window).scrollTop()-lst));
                }
            } else { //upscroll
                var top_trigger = parseFloat(sidebar.css('paddingTop'))+parseFloat(offset.top)-100;
                if ($(window).scrollTop() < top_trigger) {
                    sidebar.css("padding-top", "+=" + ($(window).scrollTop()-lst));
                }

            }
            lst = $(window).scrollTop();
        }
});
于 2016-01-05T14:26:24.207 に答える
0

ちょっと私は彼らのコードを見て、ここに私を導いたその別の部分をたどりました http://foundation.zurb.com/old-docs/f3/grid.php。Twitter を扱ったことはありませんが、彼らのグリッド システムは Twitter ブートストラップのグリッド システムとほとんど同じように見えます。あなたに関係するそのリンクのセクションは、オフセットとさらに重要なブロック グリッドを使用しているようです。

于 2013-05-07T10:40:07.103 に答える