Take the 2-minute tour ×

I wanted to stick the 2nd div when we scroll down the page and when the 2nd div meets the top boundary. When it's fixed, it should scroll along with the other pages. How can I achieve this?


and the HTML

<div id="top">
    <div id="settings">
    <div id="menu">
<div id="body-content">


Here in this example http://jsfiddle.net/WBur3/ , the 2nd div should be fixed when we scroll the page. When we scroll up, should turn into the previous state itself. Please help me.

share|improve this question
So, if i'm correct you want the menu to be fixed. But it has to move to the top of the page as soon as you scroll down? –  Bart Jan 24 '13 at 7:48
Yes... When we scroll down, only the "menu" has to be fixed at the top. When we scroll up to the max, "settings" and "menu" has to be displayed. –  user1012181 Jan 24 '13 at 7:50

1 Answer 1

up vote 23 down vote accepted

You can get this effect with jquery

        // Check the initial Poistion of the Sticky Header

                } else {


NOTE: Don't forget to include jquery library link in your page (assuming you as beginner)

share|improve this answer
But I don't want to use table inside the <div> Is there any alternative methods? –  user1012181 Jan 24 '13 at 7:53
@user1012181 that is just an example. you can add whatever you want. check this jsfiddle.net/uFq2k/1 –  Sowmya Jan 24 '13 at 7:55
is there a way of having this jquery script work on smartphones as well? When testing on smartphones the menu doesn't stick? –  Eirik Mar 19 at 11:22
I dont know whether you noticed it or not. When it is fixed the content jumps to the empty space it creates. Can you give a solution to that? Please –  Arin Chakraborty Dec 20 at 18:02

Your Answer


