How to hide fixed DIV when footer is visible on screen?

Question

I have a fixed sidebar, which is visible all along the page when scrolling down.

The problem is that - in some cases - the sidebar is getting over the footer when reaching to the bottom of the page.

I want to hide the sidebar when the Footer is visible on screen to avoid that. How can I do it?

http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling You can use that in a scroll event handler and hide the div if it is true. — Taplar, Apr 25 '15 at 10:46
[Please try to improve your spelling.](http://meta.stackoverflow.com/questions/291362) — peterh, Apr 25 '15 at 13:35

score 6 · Accepted Answer · edited May 23 '17 at 11:54

Try this:

var isScrolledIntoView = function(elem) {
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).on('scroll', function () {
    $('#sidebar').toggle(!isScrolledIntoView('#footer'));
});

Reference: Check if element is visible after scrolling

The function is called on window scroll and check if footer is visible. If visible, it hides sidebar else shows.

:visible checks that an element is not hidden, not that it is in view. http://api.jquery.com/visible-selector/ — Taplar, Apr 25 '15 at 10:48

score 2 · Answer 2 · answered Apr 25 '15 at 11:06

well... this is what I ended up with - works like a charm :)

$.fn.isVisible = function() {
    // Current distance from the top of the page
    var windowScrollTopView = $(window).scrollTop();

    // Current distance from the top of the page, plus the height of the window
    var windowBottomView = windowScrollTopView + $(window).height();

    // Element distance from top
    var elemTop = $(this).offset().top;

    // Element distance from top, plus the height of the element
    var elemBottom = elemTop + $(this).height();

    return ((elemBottom <= windowBottomView) && (elemTop >= windowScrollTopView));
}


$(document).ready(function() {
    $(window).scroll(function() {
        if($("#footer").isVisible()) {
            $("#sidebar").addClass('hiddensidebar');
        } else {
            $("#sidebar").removeClass('hiddensidebar');
        }
    });
});

How to hide fixed DIV when footer is visible on screen?

2 Answers2