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

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

});