javascript - 保持div到页面底部，直到滚动到某个位置

我有以下设置：


一个大的html页面（所以有滚动条）
在底部附近的div内...我们称其为positionDiv：<div id="positionDiv">Lalala</div>
另一个叫div的div说... floatDiv：<div id="floatingDiv">Lalala</div>


我需要做的是将floatingDiv保持在页面底部（易于固定的位置：固定），直到（滚动后）位于positionDiv顶部（此处固定的位置失败，因为div将永远停留在底部）。

知道怎么做吗？

最佳答案

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