0

scrollTopに到達すると、固定された位置に相対的な位置から変換されるdivの2つのインスタンスがあります。ただし、フッター div がスクロールされたら、1 つの機能をオフにする方法を探しています。このページのサイドバーを見ると、私が達成しようとしていることをよりよく理解できます。http://staging.alcoholrehab-florida.com/alcohol-rehab-programs.html

ページが下部のフッター div に到達したら、サイドバーを position:relative に戻して、ページの残りの部分を覆わないようにし、コンテンツ セクションと共に上にスクロールできるようにする必要があります。

以下は、私が使用している現在のjQueryスクリプトです。どんな助けやアドバイスも大歓迎です！

    <script>
    $(function() {

// grab the initial top offset of the navigation 
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
    var scroll_top = $(window).scrollTop(); // our current vertical position from the top

    // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
    if (scroll_top > ( sticky_navigation_offset_top - 120 )) { 
        $('#sticky_navigation').css({ 'position': 'fixed', 'top':120, 'background':'#f0f0f0' });
        $('.container').css({ 'position': 'relative', 'top':144 });
        $('.sidebar').css({ 'position': 'fixed', 'top':264 });
    } else {
        $('#sticky_navigation').css({ 'position': 'relative', 'top':0, 'background':'#fff' });
        $('.container').css({ 'position': 'relative', 'top':60 });
        $('.sidebar').css({ 'position': 'relative', 'top':0 });
    }  
};

// run our function on load
sticky_navigation();

// and run it again every time you scroll
$(window).scroll(function() {
     sticky_navigation();
});

    });
    </script>
4

2 に答える 2

0

これを行う 1 つの方法は、ウィンドウの高さとドキュメントの高さを測定することです。ページが (ドキュメントの高さ - ウィンドウの高さ) より大きい値までスクロールすると、一番下に到達したことがわかります。次に、フッターの高さを追加するだけです。スクロールトップがそれより大きい場合は、ページの上部にジャンプするため、相対に戻す必要はありません。負のトップ位置（相対）を指定するだけです。フッターの上端よりも上に保持されているような印象を与えます。

コード例がなくて申し訳ありませんが、上記のロジックが、最下部にいるときと、サイドバーをオフセットしてフッターに触れないようにする方法を理解するのに役立つことを願っています.

于 2013-01-25T20:39:13.900 に答える
0

私は常にこのプラグインをスティッキー要素に使用したり、ユーザーが特定の要素にスクロールしたことを検出したりするだけでした: http://imakewebthings.com/jquery-waypoints/

于 2013-01-25T20:39:23.193 に答える