Preventing element from displaying on top of footer when using position:fixed

Question

I'd like to use the CSS property position:fixed to fix the position of an element but at the same time prevent the element from being positioned over my footer when the user scrolls to the bottom of the page. Is there a way of stopping an element from showing over a footer in this way?

Answer 1

If you want the element to be fixed sometimes but not others you will need to use JavaScript to add/remove position:fixed

First of all set the element without position:fixed so that it appears in the page above the footer where you want it once scrolled to the bottom.

Then set a css class that when added to the element fixes its position, something like:

div#sometimesfixed.fixed
{
    position:fixed;
    bottom: 0px;
}

The following code uses jquery, detects the scroll position on the page, and adds/removes the fixed class accordingly:

$(window).scroll(function (event) {
    var windowTop = $(this).scrollTop();        
    if (windowTop >= $("#footer").offset().top) {
        $("div#sometimesfixed").addClass("fixed");
    } else {
        $("div#sometimesfixed").removeClass("fixed");
    }
});

Answer 2

As long as all the elements are positioned (absolute or relative) you can use the z-index attribute. The default value is 0, so give your footer a higher value and it will appear above the other content.

Answer 3

I ran into this same issue recently. You can achieve a solution leveraging the position property of the element with jQuery, switching between the default value (static for divs), fixed and absolute. You will also need a container element for your fixed element. Finally, in order to prevent the fixed element to go over the footer, this container element can't be the parent of the footer.

The javascript part involves calculating the distance in pixels between your fixed element and the top of the document, and comparing it with the current vertical position of the scrollbar relatively to the window object (i.e. the number of pixels above that are hidden from the visible area of the page) every time the user scrolls the page. When, on scrolling down, the fixed element is about to disappear above, we change its position to fixed and stick on top of the page.

This causes the fixed element to go over the footer when we scroll to the bottom, especially if the browser window is small. Therefore, we will calculate the distance in pixels of the footer from the top of the document and compare it with the height of the fixed element plus the vertical position of the scrollbar: when the fixed element is about to go over the footer, we will change its position to absolute and stick at the bottom, just over the footer.

Here's a generic example.

The HTML structure:

<div id="content">
    <div id="leftcolumn">
        <div class="fixed-element">
            This is fixed 
        </div>
    </div>
    <div id="rightcolumn">Main content here</div>
    <div id="footer"> The footer </div>
</div>  

The CSS:

#leftcolumn {
    position: relative;
}
.fixed-element {
    width: 180px;
}
.fixed-element.fixed {
    position: fixed;
    top: 20px;
}
.fixed-element.bottom {
    position: absolute;
    bottom: 356px; /* Height of the footer element, plus some extra pixels if needed */
}

The JS:

// Position of fixed element from top of the document
var fixedElementOffset = $('.fixed-element').offset().top;
// Position of footer element from top of the document.
// You can add extra distance from the bottom if needed,
// must match with the bottom property in CSS
var footerOffset = $('#footer').offset().top - 36;

var fixedElementHeight = $('.fixed-element').height(); 

// Check every time the user scrolls
$(window).scroll(function (event) {

    // Y position of the vertical scrollbar
    var y = $(this).scrollTop();

    if ( y >= fixedElementOffset && ( y + fixedElementHeight ) < footerOffset ) {
        $('.fixed-element').addClass('fixed');
        $('.fixed-element').removeClass('bottom');          
    }
    else if ( y >= fixedElementOffset && ( y + fixedElementHeight ) >= footerOffset ) {
        $('.fixed-element').removeClass('fixed');           
        $('.fixed-element').addClass('bottom');
    }
    else {
        $('.fixed-element').removeClass('fixed bottom');
    }

 });

Answer 4

Add some extra margin-bottom to your footer so the user can scroll past the bottom a bit so your footer can clear the fixed element.