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，因此您无需复制内容。

$(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 回答