Responsive Div to scrolling

Question

I am trying to duplicate the floating search options bar on Nike's Website. It appears that it's position is fixed to the bottom when one scrolls far enough to reach the bottom of the options bar and when scrolling back up becomes fixed to the top when one reaches the top of the options bar.

I am sure this is a simple jquery script but being a novice I have not been able to figure out how this is done.

Here is the jQuery script I am using:

google.load("jquery", "1");

function sticky_relocate() {

    var window_top = $(window).scrollTop();

    var div_top = $('#sticky-anchor').offset().top;

    if (window_top > div_top)    
        $('#sticky').addClass('stick')
    else    
        $('#sticky').removeClass('stick');

}

google.setOnLoadCallback(function() {

    $(window).scroll(sticky_relocate);    
    sticky_relocate();

});

Thanks for your help!

[What have you tried?](http://mattgemmell.com/2008/12/08/what-have-you-tried/) — Zeb Rawnsley, Dec 08 '12 at 04:08
Take a look at http://stackoverflow.com/questions/how-to-ask — Zeb Rawnsley, Dec 08 '12 at 04:16
I have spent hours searching and I was able to find several "scroll to top then fix" scripts. Which is where I got the above script. However the problem I am having is making the options bar scroll responsive. — Mike, Dec 08 '12 at 04:20

score 0 · Accepted Answer · answered Dec 08 '12 at 04:36

0

Seems pretty straight forward, when you're scrolling check to see if it's going up or down.

If it's going down then have it scroll with the page, until it reaches the bottom, then fix the position.

If you're going up, basically do the same thing. Scroll with the page until you hit the top, then it stays.

Have you tried writing the code for this? Also, can you post your page source so i can try and code it also?

answered Dec 08 '12 at 04:36

jackcogdill

4,900
3
30
48

you can do `$('divid').css('position', 'fixed');` btw, in case you didnt know. – jackcogdill Dec 08 '12 at 04:38
read this: http://stackoverflow.com/questions/4989632/differentiate-between-scroll-up-down-in-jquery – jackcogdill Dec 08 '12 at 04:41
basic comparisons, but since you dont want to spam the window checking every time you scroll even the slightest, you should use a `setTimeout` inside the `$window.scroll();` function, every tenth of a second or so. – jackcogdill Dec 08 '12 at 04:44
Sounds simple enough. But I really am a huge novice. I might be bugging you guys with a new post. But if not I really appreciate your help! This site is the best!!!! – Mike Dec 08 '12 at 05:06
Most everything you'll need has already been asked - be sure to look around on SO before so you don't post duplicates! Pretty cool effect when you get it working! – DACrosby Dec 08 '12 at 05:09
I will. Being such a novice sometimes it's hard to figure out how to word the search phrase effectively but this site is a wealth of information. – Mike Dec 08 '12 at 05:16

Responsive Div to scrolling

1 Answers1