滚动浏览器窗口底部后，如何确定是否已到达DIV顶部？

Question

我正在尝试使用jQuery / Javascript解决此问题：

当浏览器向下滚动并且窗口底部到达页脚DIV的顶部时，请更改CSS代码。

问题示例： https : //elodywedding.com/blog （确保您的浏览器窗口为移动设备尺寸。）

如果向下滚动到较小分辨率的页脚，则页脚会静态浮动，并位于“标签” DIV上方。 我需要将位置重新设置为绝对。

有什么想法如何检测滚动何时导致窗口到达页脚DIV的顶部？

Answer 1

像这样的东西似乎起作用： https : //jsfiddle.net/zk49cuy7/

<style type="text/css">
#body {
    height:1500px;
    background-color:red;
}
#footer {
    height:200px;
    background-color:blue;
}
</style>

<div id="body"></div>
<div id="footer"></div>

jQuery(function($){
    $(window).bind('scroll', function(e){
        if($(window).scrollTop() + window.innerHeight >= $('#footer').offset().top)
        {
            console.log('BOTTOM');
        }
        else
        {
            console.log('NOT BOTTOM');
        }
    });
});

绑定到窗口滚动并检查滚动顶部+窗口高度是否大于页脚的偏移顶部。