web-dev-qa-db-ja.com

スクロールするサイドバーをフッターで停止させます

私は現在以下を使用しています：

http://jsfiddle.net/0mLzseby/469/

サイドバーをページの下に移動させるには。私はかなり大きなフッターを持っていますが、スクロールし続けるのではなく、フッターに到達したときにdivを停止したいと思います。

私が現在持っているコードは次のとおりです。

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});
javascriptjqueryhtmlcssscroll
6
BN83

フッターまでスクロールダウンしたかどうかを確認してから、stickクラスを削除できます。

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $("#sticky").height();

    if (window_top + div_height > footer_top)
        $('#sticky').removeClass('stick');    
    else if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

（ifを組み合わせて、重複する.removeClassを削除できます。ここではデモ用です）

ただし、cssを使用すると、スクロールを開始すると厄介な「ジャンプ」が発生します。フィドルでは、適切なコンテンツが#stickyの下に表示され、＃stickyを貼り付けると、適切なコンテンツがジャンプしてギャップを埋めます。上記のコードを使用すると、offset（）がギャップを埋める/埋めないときに移動するときに、いくつかの競合状態が発生します。

このギャップを修正するには、＃stickycssにfloat:leftを追加するだけです。

更新されたフィドル： http://jsfiddle.net/0mLzseby/472/

さらに一歩進んで、一番下に到達すると、divがページとともにスクロールを開始するのではないかと思います。これを行うには、.stickの 'position：fixed'上部を調整します。フッターの下にない場合は、リセットすることを忘れないでください。

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $("#sticky").height();

    var padding = 20;  // Tweak here or get from margins etc

    if (window_top + div_height > footer_top - padding)
        $('#sticky').css({top: (window_top + div_height - footer_top + padding) * -1})
    else if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('#sticky').css({top: 0})
    } else {
        $('#sticky').removeClass('stick');
    }
}

パディングにより、より自然な場所でスクロールが開始されます。これは、他のコンポーネントのマージンやパディングなど、他のcss属性から取得できる可能性があります。

更新されたフィドル： http://jsfiddle.net/0mLzseby/473/

13
freedomn-m

これは、position: stickyを使用してJavaScriptなしで実現できるようになりました。

更新されたフィドル： http://jsfiddle.net/p1gku0mx/3/

重要なのは、スティッキー要素を別のdivでラップすることです。スティッキー要素はラッパーdivの外側に移動できないため、フッターが表示されると上にスクロールされます。

2
jdnz

フッターにいる場合はクラスを追加するのを忘れて、ページを更新すると、サイドバーが表示されません。

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $("#sticky").height();

    var padding = 20;  // Tweak here or get from margins etc

    if (window_top + div_height > footer_top - padding) {
        $('#sticky').addClass('stick'); //////// here is to get fixed when we refrech page when we are in the footer
        $('#sticky').css({top: (window_top + div_height - footer_top + padding) * -1})
}     else if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('#sticky').css({top: 0})
    } else {
        $('#sticky').removeClass('stick');
    }
}
1
user3134277

あなたこれにJavaScriptを使用する必要はありません。これはCSSのみを使用して実行できます。

position: sticky;

body{
  padding: 0 20px;
}
#content {
  height: 1200px;
}
header {
  width: 100%;
  height: 150px;
  background: #aaa;
}
main {
  float: left;
  width: 65%;
  height: 100%;
  background: #444;
}
aside {
  float: right;
  width: 30%;
  height: 500px;
  position: sticky;
  top: 100px;
  background: #777;
}
footer {
  width: 100%;
  height: 300px;
  background: #555;
}
<body>
  <header>Header</header>
  <div id="content">
    <main>Content</main>
    <aside>Sidebar</aside>
  </div>
  <footer>Footer</footer>
</body>
0
Krzysztof AN

下にスクロールしてスティッキークラスを追加したかどうかを確認できます。フッターとヘッダー領域をスクロールすると、スティッキークラスが削除されます。

function Stickyheaderfooterbar() {
        var windowTop = jQuery(window).scrollTop();
        var footerTop = jQuery(".footer").offset().top - 498;
        var stickydivTop = jQuery('#sticky-anchor').offset().top;
        var stickydivHeight = jQuery("#sticky").height();
        console.log('footer' + footerTop);
        console.log('stickydivTop' + stickydivTop);
        console.log('stickydivHeight' + stickydivHeight);
        console.log('windowTop' + windowTop);
        if (windowTop + stickydivHeight > footerTop)
            jQuery('#sticky').removeClass('stick');
        else if (windowTop > stickydivTop) {
            jQuery('#sticky').addClass('stick');
        } else {
            jQuery('#sticky').removeClass('stick');
        }
    }
0
Patel Disha