0

サイトに横に固定されたサイドバーがあり、ユーザーが上下にスクロールすると、スタイル属性のトップが変更され、高さが調整されます。

$(window).scroll(function() {
    if ($(this).scrollTop() < 125){
        var v = 125 - $(this).scrollTop();
        $("#sidebar").css({'top':v + 'px'});
    }
    if ($(this).scrollTop() >= 125)
    {
        $("#sidebar").css({'top':'5px'});
    }
});

ただし、下にスクロールすると、サイドバーが制御不能にジャンプするように見え、思うように画面にくっつきません。Chrome 32 を使用しているため、何が問題なのかわかりません。誰かがこの問題で私を助けてください。

4

1 に答える 1

1

このフィドルをチェックしてください。

fixed という CSS クラスを作成します。

.fixed {
    position: fixed;
    top: 0px;
}

スクロール時に、適切な効果を得るために、JavaScript で「固定」クラスを適宜追加および削除します。

JavaScript :

$(function () {
    var $sidebar = $('#sidebar');
    $(window).on('scroll', function () {
        if($(this).scrollTop() < 125) {
            $sidebar.removeClass('fixed');
        } else {
            $sidebar.addClass('fixed');  
        }
    });
});

ヘッダーがウィンドウの外にスクロールすると、サイドバーは「固定」クラスを取得し、それぞれ左上 (0,0) の画面の端に固定されます。ヘッダーが表示に戻ると、クラスが削除され、サイドバーが元の位置に優雅に戻ります。

于 2013-11-11T21:57:21.547 に答える