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!

Answer 1

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?