How to use CSS to stop an HTML element scrolling off the top of the screen

Question

I'm trying to set the site name/logo and the navigation on my page so that when it hits the top of the page, it stays there instead of disappearing off the top of the screen. I've tried position: fixed;, but unless I'm missing somthing that is not what I need to do.

My layout is as follows, and it is header-top and header-nave that I wish to not disapear off the top of the page -

<header>
    <div id="header-top"></div>
    <div id="header-middle"></div>
    <div id="header-nav"></div>
</header>

Does anybody have any tips on this, or know if it is even possible with CSS? Either way, some pointers to tutorials or even the method to use to do this would be helpful.

Am open to JS if that is what is needed. Thanks.

I think you need javascript. When the header hits the top of the window, you dinamically set position:fixed so it stays there. — ezakto, Apr 02 '12 at 13:58
@Fabrizio - I've tried in various different scenarios (never on `header` though, as I don't want `header-middle` to remain fixed), but the outcome was always that the `header-top` and `header-nav` elements stayed exactly where they were, with the header middle scrolling. From my understanding that's the limitation of fixed, but any suggestions for implimentation would be welcome. Thanks. — David Gard, Apr 02 '12 at 14:00
@eZakto - That's what I thinking, but I have no idea where to start. Any suggestions on how I check when it hits the top of the screen? — David Gard, Apr 02 '12 at 14:01
Are you using jQuery or another js framework? Check the source code of http://twitter.github.com/bootstrap/components.html to get an idea using jQuery — ezakto, Apr 02 '12 at 14:06
possible duplicate of [how can I make a div stick to the top of the screen once it's been scrolled to?](http://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to) — j08691, Apr 02 '12 at 15:47

score 2 · Answer 1 · answered Apr 02 '12 at 14:34

There are a bunch of demos on how to accomplish this. Basically you need to figure out how far down the window to start to make the nav "sticky" with fixed positioning.

Here's a link to a good demo on it: http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/

David Gard · Accepted Answer · 2012-04-03T14:50:11.457

Thanks to the helpful hints and pointers (@Wesley Terry and @eZakto), here is the JS that acheives exactly what I am looking to do.

$(function(){

    var top = $('#header-top-full-width');
    var nav = $('#header-nav-full-width');

    $(window).scroll(function(){

        if($(window).scrollTop() >= 90){
            border_bottom('0');
        } else if($(window).scrollTop() === 89){
            border_bottom('1');
        } else if($(window).scrollTop() === 88){
            border_bottom('2');
        } else if($(window).scrollTop() <= 87){
            border_bottom('3');
        }

        if($(window).scrollTop() >= 90){ // To far, the navigation needs to be set in place
            nav.css('position', 'fixed');
            nav.css('margin-top', '-90px');
            if($('#nav-spacer').length) { // Add a spacer so the height is correct if needs be
            } else {
                $('<div id="nav-spacer"></div>').insertAfter('#header-nav-full-width');
                $('#nav-spacer').css('height', '32px');
            }
        } else { // The navigation needs to just be static, so remove the spacer and make it static
            nav.css('position', 'static');
            nav.css('margin-top', '0');
            $('#nav-spacer').remove();
        }       
    });
});

Have you found a way to do this with css alone? Or is that impossible? — Seth Urquhart, Apr 18 '13 at 17:54
@SethUrquhart - It depends on exactly what you want. I required a way to fix an element once the user had scrolled to a certain point, necessitating the use of JS. If you just want it fixed it the same position all the time, you can just use `position: fixed;`. — David Gard, Apr 19 '13 at 23:17
Yeah I know fixed position, I wasn't sure if there was anything else you could do without JS concerneing trying to move the header to the top and then stay fixed when it hits the top. Looks like I'll have to learn me some Javascript! :) Thanks. — Seth Urquhart, Apr 22 '13 at 17:59
Tag the question with JavaScript if you're going to accept a JavaScript answer. — keeehlan, Jul 30 '14 at 19:57

How to use CSS to stop an HTML element scrolling off the top of the screen

2 Answers2