jQuery: How to keep a DIV at the top of the screen AND restore its position after scrolling up (and reaching its original position)

Question

I want a div element to do something similar to gmail.

• When scrolling down, once gmail's menu (Archive, Spam, Delete...etc) reaches the the top of the screen, it stays there.

• When scrolling up, the menu returns to it's original position.

Another sample is the side bar of this page: sample 2

How to achieve that with a simple (and easy to understand) jQuery code? (Compatible with all browsers)

<div id="header">Menu goes here =)</div>

Solution 1

Specific to your problem, try this:

CSS:

#header.floating {
    position: fixed;
    top: 0;
}

JavaScript:

$(document).ready( function() {

    $(window).scroll( function() {
        if ($(window).scrollTop() > $('#header-wrapper').offset().top)
            $('#header').addClass('floating');
        else
            $('#header').removeClass('floating');
    } );

} );

jsFiddle: http://jsfiddle.net/omarjuvera/0p9p43Lz/

Solution 2

A better way of doing this is using jquery waypoints. Please have a look at this sticky-elements example

Also, here is the getting started section to the waypoints plugin.

As you can see when scrolling down, the menu sticks to the top screen.

Hope this is helpful.

Solution 3

You can try this:

<script>
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
        menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
        $(window).scroll(function () { 
            offset = menuYloc+$(document).scrollTop()+"px";
            $(name).animate({top:offset},{duration:1000,queue:false});
        });
});
</script>

And some CSS for the floating DIV called floatMenu:

#floatMenu { position:relative; width:100%px; top:0px; left:0px; }

And a DIV that floats:

<div id="floatMenu">Your content</div>

It hasn't quite got the same effect as the example you gave us. This one is animated and chases you down the screen...

Comments

[griegs]

+1 Very cool. However, you might want to post the code as links to sites are frowned upon sometimes because if the site goes down....

[griegs]

Plus, if you turn this into a plugin that would be a (very) useful tool.

[Omar]

with this code, the menu disappears and re-appears while scrolling down :-( How can it be fixed? punkbunny.com/tmp/scroll/top_n_restore2.html

[Matt Bradley]

Oops, I forgot a really important part: the div that floats needs to be inside a wrapper div. You check $(window).scrollTop() > $('#header-wrapper').offset().top instead of $(window).scrollTop() > $('#header').offset().top. I've updated my answer to reflect this.

[TheCarver]

+1 - Great effect. You should share this in the plug-in world

[Reza]

It is not working well, I tried to wrap my elements into a header-wrapper div, but still is not working, I suggest you to edit your answer and add a jsfiddle link if it is possible

[Omar]

since the link does not work anymore, would you mind adding your answer as a code?

[Omar]

Thanks for updating the links. What if the links "die" again? Would you like to add your code as part of the answer?

[Mohamed Anis Dahmani]

I doubt they will vanish again. The developer has updated the website and that changed the links to its plugin. So, no worries.

[depicus]

BE CAREFUL the link above seems to go to a spam/scam/malware type site