How do I do this effect (not sure what it's called)

[wheelhot]

Hello,
I am currently in the process of designing and wondering how do some sites make their navigation to follow along as the user scroll down the page and restores back to its original position (right below the header)?

Here is a rough sketch on what I meant, notice the navigation sticks to the top when the user scroll down, and when the page is scroll back up, the navigation will go back to its original position.

I've seen some site do this, one of them that I can recall is Apple Online Store (Notice how the Summary and Spec panel moves). I've seen other sites do the same effect but can't recall the address or what it's called. Sorry that I can't give further information.

Thanks in advance.

 

[manueld]

navigation is absolutely positioned and if need be, the highest z-index. i.e.

css:
body{
position: relative;
}
ul#nav{
width: 100%;
position: absolute;
top:0;
left:0;
z-index: 1000;
}

just make sure that there's no class, id, element that has position relative prior to the navigation or else that absolute position is going to be relative to that element.

 

[wheelhot]

Didn't work, care to give me your code?

And is this effect can be achieved by CSS only or I'll need JQuery or something to make it work?

 

[wheelhot]

It's ok, found it

Solution

Hope the link will help other forum members who looking for similar effect

 

[manueld]

i got what you were asking confused.. you just need to change the position from absolute to "position: fixed" and that will keep it in the browser window no matter your scrolling..the jquery will just animate an object.