CODEWITHSUNDEEP
jqueryhtmlalignment
Nathan Bunn
Nathan Bunn

Reputation: 597

How do I make a bar appear on the page aligned to the bottom when I am 250px (for arguments sake) from the bottom?

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.

Upvotes: 2

Views: 381

Answers (2)

Steve Greatrex
Steve Greatrex

Reputation: 15999

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

Upvotes: 1

Gary Kerr
Gary Kerr

Reputation: 14420

The basic maths to find out if you are less than 250px from the bottom of the page:

$(document).height() - $(window).height() - $(window).scrollTop() < 250

A working example: http://jsfiddle.net/9xDxE/.

You will need to decide what to do when a page is displayed without a scroll bar.

Upvotes: 2

Related Questions