Question

我有以下设置：

一个大的html页面（所以滚动就在那里）
在底部靠近底部的一个div ...我们称之为positionDiv：<div id="positionDiv">Lalala</div>
另一个div叫做...... floatingDiv：<div id="floatingDiv">Lalala</div>

我需要做的是将floatingDiv保留在页面底部（可以轻松地使用位置：固定），直到它（在滚动之后）位于positionDiv之上（此处为固定的位置失败，因为div将永远保持在底部。）

知道怎么做吗？

Answer 1

接受的答案是一个很好的基础，但滚过div后，然后备份，它将不会切换回固定的div，因为positionOffset和floatingOffset相等，并且不会改变。

我有updated the 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();

});

Answer 2

jQuery公开了一个offset方法，可以在这里提供帮助。

编辑：改进的代码，working example。

$(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();
})

将div保留在页面底部，直到滚动到达某个位置

2 个答案: