Clever Geek Handbook

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

I have a fixed sidebar that is visible throughout the page when scrolling down.

The problem is that in some cases the sidebar slides over the footer when it reaches the bottom of the page.

I want to hide the sidebar when the footer is visible on screen to avoid this. How can i do this?

+3


source to share


2 answers


Try the following:

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


Ref: Check if the element is visible after scrolling

The function is called on the scrolling window and checks if it is displayed footer

. If visible, it hides the sidebar

else shows.

+5


source


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');
        }
    });
});
+1


source






More articles:


All Articles