how can I stick the div after scrolling down a little

Question

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.

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 07: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 07:50

Sowmya · Accepted Answer · 2013-01-24T08:03:09.767

54

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>

edited Jan 24 '13 at 08:03

answered Jan 24 '13 at 07:49

Sowmya

26,684
21
96
136

But I don't want to use table inside the
Is there any alternative methods?
– user1012181 Jan 24 '13 at 07:53
3

@user1012181 that is just an example. you can add whatever you want. check this http://jsfiddle.net/uFq2k/1/ – Sowmya Jan 24 '13 at 07:55
1

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 '14 at 11:22
2

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 '14 at 18:02

score 4 · Answer 2 · answered Jan 08 '15 at 21:42

I would add a comment here but I don't have enough reputation to do that. I was needing something similar in a project and I thought I'd share my changes to @Sowmya's answer. I cleaned the code up a bit and made the scroll effect a lot smoother. JSfiddle

$(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'
            });
            $('#othercontent').css('margin-top', $('#stickyheader').outerHeight(true) + parseInt($('#unstickyheader').css('marginBottom')));
        } else {
            $('#stickyheader').css({
                position: 'static',
                top: '0px'
            });
            $('#othercontent').css('margin-top', '0px');
        }
    });
});

body {
    font: 13px sans-serif;
}
#stickyheader {
    width: 100%;
    height: 40px;
    background:black;
    color:white;
    margin-bottom: 10px;
}
#unstickyheader {
    margin-bottom: 15px;
}

score 0 · Answer 3 · edited Jun 28 '15 at 05:50

Assign an id to menu div:

 <div id ="menuContainer">

Include jquery in the project and on the page:

<script src="Scripts/jquery-1.11.3.min.js" type="text/javascript"></script>

Below is the code to implement desired effect:

<script type="text/javascript">

    $("document").ready(function ($) {

        // On document load get the position of the div u want to stick on certain position
        var offsets = document.getElementById('menuContainer').getBoundingClientRect();

        // Get position from top of browser
                var topoffsets = offsets.top;

                // Binding fuction to windows scroll event
                $(window).bind('scroll', function () {

                    if ($(window).scrollTop() > topoffsets) {

                               $("#menuContainer").css({ top: 0, position: 'fixed' });

                            } else {
                               $("#menuContainer").css({ top: '', position: '' });
                            }
                });
    });

score 0 · Answer 4 · edited Aug 04 '18 at 08:12

Without `

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
    /* Note: Try to remove the following lines to see the effect of CSS positioning */
    .affix {
      top: 0;
      width: 100%;
    }
    .affix + .container-fluid {
      padding-top: 70px;
    }
    </style>
    </head>
    <body>
    <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
    <h1>Bootstrap Affix Example</h1>
    <h3>Fixed (sticky) navbar on scroll</h3>
    <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
    </div>

    <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    </ul>
    </nav>
    <div class="container-fluid" style="height:1000px">
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    </div>
    </body>
    </html>

`, we can do this by using the above code.

how can I stick the div after scrolling down a little

4 Answers4

Linked