Home/ Questions/Q 9195161
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T21:34:10+00:00

I wanted to stick the 2nd div when we scroll down the page and

  • 0

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?

#settings{
    width:100%;
    background:#383838;
    height:60px;
}
#menu{
    width:100%;
    position:relative;
    height:100px;
    background:#aaa;
}
#body-content{
    height:900px;
    position:relative;
}

and the HTML 

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

</body>

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can get this effect with jquery

    $(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });

    DEMO HERE

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

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    • 0