CODEWITHSUNDEEP
javascriptjquery
Filip
Filip

Reputation: 95

How to determine if after scrolling the bottom of browser window has reached top of DIV?

I am trying to solve this issue with jQuery/Javascript:

When the browser scrolls down and the bottom of the window reaches the top of the footer DIV, action a CSS code change.

Example of problem: https://elodywedding.com/blog (Ensure your browser window is mobile-sized.)

If you scroll down to footer on a smaller resolution, the footer floats statically and sits above the "tags" DIV. I would need to set position back to absolute.

Any ideas how to detect when the scrolling causes the window to reach the top of the footer DIV?

Upvotes: 0

Views: 1538

Answers (1)

ryachza
ryachza

Reputation: 4540

Something like this appears to work: 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');
        }
    });
});

Binding to window scroll and checking whether the scroll top + window height is greater than the offset top of the footer.

Upvotes: 1

Related Questions