Fixed div at bottom of the window then stays above the footer when the page is scrolled down

Asked Jan 15 '15 at 19:48

Active Jan 15 '15 at 19:53

Viewed 438 times

I would like a sticky bar to stay at the bottom of the window at all times. As the user scrolls down to the bottom of the page the same bar will stay fixed until the footer shows, then removes its fixed position, temporarily, to stay above the footer until the user scrolls back up and it remains fixed again.

I've achieved a similar effect with a navigation bar (calculated from the top of the window) on another project, but can't figure out reverse it as scrollBottom doesn't seem to exist.

This is the working header code:

var nav = $('.nav');
    fixed = 'nav-fixed';
    hh = $('header').height();

$(window).scroll(function() {
    if( $(this).scrollTop() > hh ) {
        nav.addClass(fixed);
    } else {
        nav.removeClass(fixed);
    }
});

When the trigger class is called:

.fixed {
    position: absolute;
    z-index: 10
    bottom: 0;
}

How would I reverse it for the footer?

Many thanks, Jack.

edited Jan 15 '15 at 19:53

asked Jan 15 '15 at 19:48

Jack Barham

3,197
10
41
62

1

Seeing your CSS would be useful as well. – Brandon Anzaldi Jan 15 '15 at 19:49
1

Well, isn't scrollBottom just scrollTop + height? – Heretic Monkey Jan 15 '15 at 19:50
Is that how it works? this is pretty new to me – Jack Barham Jan 15 '15 at 19:54
Would that be scrollTop + height - footer height? It's the logic that I'm struggling with – Jack Barham Jan 15 '15 at 19:56
Don't worry, think I have found it http://jsfiddle.net/PBn8q/5/ - I'll post an answer when I have adapted this. – Jack Barham Jan 15 '15 at 20:22
Not so much "how it works" as "logical deduction" :) – Heretic Monkey Jan 15 '15 at 22:17
I have almost got it working, but I need to trigger it after a certain page width, I have posted the updated code and example on this new question http://stackoverflow.com/questions/27985099/a-cleaner-way-for-a-fixed-div-at-bottom-of-the-window-but-stays-above-the-footer – Jack Barham Jan 16 '15 at 13:33

Fixed div at bottom of the window then stays above the footer when the page is scrolled down

0 Answers0