Question

I have seen scripts that have a menu fixed to the top of the page when you scroll to a certain point (example: http://jsfiddle.net/2rhrc/) using jQuery. I know I can align a at the bottom. However, can I, using jQuery, scroll to a certain point based on the bottom of the page (in my question, I suggested 250px, but this can be varied) and have my bar fade in and remain fixed to the bottom? When I scroll higher than 250px from the bottom, the bar will fade out, but will fade in when I reach 250px or lower. I have found a plethora that base measurements from the top of the page, but I can’t find any from the bottom.

I want to use this to display a Previous / Next post bar in my WordPress blog. I don’t know how best to do this, either with a WordPress plugin or a custom script for my div and use WordPress to insert the Next / Previous links. I would like to completely control the style, so I have looked for pre-made plugins to see what can be done. Any help would be fantastic.

For an idea of what I mean, please see http://www.buzzingup.com/2011/07/how-to-transfer-your-facebook-photos-to-google-plus/. I know it uses jQuery, but I can’t seem to find the plugins that are used.

Answer 1

You can use the scroll event handler to show or hide a fixed position div:

jQuery

$(document).scroll(function() {
    if ($(document).height() - $(window).height() - $(window).scrollTop() < 250) {
        $("#bar").fadeIn();
    } else {
        $("#bar").fadeOut();
    }
});

CSS

#bar
{
    display: none;
    position: fixed;
    bottom: 0px;
    background: black;
    height: 50px;
    width: 100%;
}

Click here for a working example