Question

How would I, with Jquery, make a sticky footer that sticks to the bottom of the browser until it hits 350px before the end of the content. Basically I have another big footer at the bottom of the content and I want the sticky footer to stay sticky until you scroll to the 350px footer and it will stay ontop of the last footer so you can read the content

basically something like make a sticky footer but then 350px before the bottom of wherever the bottom of the content is stop the sticky footer and make it scroll with the page.

I found this online but i know the code to find out where the end of the content, as opposed to the end of the veiwable browser, would be different…Although it does work as a general sticky footer

$(function(){
positionFooter(); 
function positionFooter(){
    if($(document).height() < $(window).height()){
        $("#globalFooter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#globalFooter").height())+"px" - })
    }   
}

$(window)
    .scroll(positionFooter)
    .resize(positionFooter)
});

Answer 1

I’ve written an example to demonstrate how you would go about creating a sticky footer. In the example, the value bottomBound would be the height of your other non-sticky footer.

It’s important to use a DOCTYPE declaration, because $(window).height() breaks without it.

The code is here: GitHub – stickyFooter and JSFiddle.

For those interested in doing this with a header rather than a footer, there’s also examples of that here: GitHub – stickyNav

Edit: Restructured answer.