1

私は次の設定をしています：

  • 大きな html ページ (スクロールがあるため)
  • その内部の下部近くに div があります...これを positionDiv と呼びましょう:<div id="positionDiv">Lalala</div>
  • 別の div という名前を付けてみましょう... floatingDiv:<div id="floatingDiv">Lalala</div>

私がする必要があるfloatingDivのは、ページの一番下に（位置で簡単に実行可能：固定）、（スクロール後）上に来るまで維持することですpositionDiv（ここでは、divが一番下にとどまるため、固定された位置は失敗します） .

それを行う方法はありますか？

4

2 に答える 2

3

受け入れられた答えは良い基盤ですが、divをスクロールしてから戻った後、固定divに戻ることはありpositionOffsetませfloatingOffsetん。

これを修正するために JSFiddle を更新しました。また、div の 1 つを削除したので、コンテンツを複製する必要はありません。

$(function fixedUntilPoint() {

    var container = $('#container');
    var offsetContainer = container.offset().top;

    function adjustDivPosition() {

        var offsetFloat = $(document).scrollTop() + $(window).height() - container.outerHeight();

        if(offsetContainer <= offsetFloat){

            container.css({
                bottom:   'auto',
                position: 'absolute',
                top:      offsetContainer
            });

        } else {

            container.css({
                bottom:   0,
                position: 'fixed',
                top:      'auto'
            });

        }

    }

    $(window).on('scroll resize', adjustDivPosition)
        adjustDivPosition();

});
于 2016-06-27T14:10:52.310 に答える
1

jQuery は、ここで役立つオフセットメソッドを公開しています。

編集: 改善されたコード、作業例。

$(function fixedUntilPoint(){
  var positionDiv = $('#positionDiv');
  var floatingDiv = $('#floatingDiv');

  function testScrollPosition(){ 
    var positionOffset = positionDiv.offset().top;
    var floatingOffset = floatingDiv.offset().top;

    if(positionOffset <= floatingOffset){
      floatingDiv.css({
        bottom:   'auto',
        position: 'absolute',
        top:      positionDiv.offset().top
      })
    }
    else {
      floatingDiv.css({
        bottom:   0,
        position: 'fixed',
        top:      'auto'
      })
    }
  }

  $(window).on('scroll resize', testScrollPosition)

  testScrollPosition();
})
于 2013-01-30T15:59:21.337 に答える