Fixed Navbar under non-fixed header

Question

My site is made up of four divs; in order they are: header, navbar, main, and footer.

I want the header to stay in place and the navbar to be underneath the header when at the top, but when the page is scrolled I want just the navbar to stick to the top.

What happens with the code I have right now (http://jsfiddle.net/BGLwM/) is that the navbar sticks to the top, but on top of the header. When I set the top to be the height of the header (placing the navbar below the header) and scroll down, there is a gap as wide as the header and the navbar does not stick to the top.

Is there a way to solve this in pure CSS? I am NOT using Bootsrap and while I don't have a problem using JS or JQuery, I don't have any experience in using either.

I think with pure css it's not possible , but you can use jQuery to fix it http://jsfiddle.net/pranavcbalan/BGLwM/4/ — Pranav C Balan, Feb 02 '14 at 02:28

Chou One · Answer 1 · 2014-02-02T02:39:14.670

1

http://jsfiddle.net/chou_one/BGLwM/6/

#navbar {
  /* BASE CODE */
  position: fixed;
     margin-top: 50px;    
  z-index: 10;
  width: 960px;
  height: 10px;
  /* STYLING */
  background: yellow;
}

I have done some mucking around and got the header and navbar to stay in its place. Is this is what you are after? Let me know and we can further tweak it.

you can change the height settings I just made them smaller for testing

edited Feb 02 '14 at 02:39

answered Feb 02 '14 at 02:21

Chou One

627
1
13
21

I wanted to make the nav stick to the top; Pranav's comment works for me despite the jQuery -- Thanks for trying though! – ohitsanazn Feb 02 '14 at 02:32

score 1 · Answer 2 · answered Oct 30 '14 at 00:58

In order to get a sticky navigation bar on scroll with only HTML and CSS, you have to make 2 navbars, one on top and one on bottom.
The one on top is "sticky" and sits behind the header while the other one is just placed underneath the header like normal and isn't sticky.

body {
  margin: 0;
  padding: 0;
}
#sticky {
  z-index: -1;
  position: fixed;
  padding: 1em;
  width: 100%;
  background: #000;
  color: #fff;
}
header {
  padding: 50px;
  text-align: center;
  font-weight: bold;
  background: #4b3621;
  color: #fff;
}
nav {
  margin-bottom: 2000px;
  padding: 1em;
  background: #000;
  color: #fff;
}

<nav id="sticky">
  <p>Sticky Navbar</p>
</nav>
<header>
  <h1>Header</h1>
</header>
<nav>
  <p>Nonsticky Navbar</p>
</nav>

I was having the same problem today so I searched Google and came up empty. Then it hit me. So I searched for a similar question so I could answer it (this is my first answer ever).
Hope this helps.

score 0 · Answer 3 · edited May 23 '17 at 12:32

This question has been asked before. I will repost (almost verbatim) another user's answer here (from How can I make a div stick to the top of the screen once it's been scrolled to?). It is not purely CSS-it is a mixture also of javascrpt and jquery. But don't worry. here is a youtube video to help you implement jquery in your page. http://www.youtube.com/watch?v=tcRHGmFnSm8

function moveScroller() {
    var move = function() {
        var st = $(window).scrollTop();
        var ot = $("#scroller-anchor").offset().top;
        var s = $("#scroller");
        if(st > ot) {
            s.css({
                position: "fixed",
                top: "0px"
            });
        } else {
            if(st <= ot) {
                s.css({
                    position: "relative",
                    top: ""
                });
            }
        }
    };
    $(window).scroll(move);
    move();
}




<div id="sidebar" style="width:270px;"> 
  <div id="scroller-anchor"></div> 
  <div id="scroller" style="margin-top:10px; width:270px"> 
    Scroller Scroller Scroller
  </div>
</div>

<script type="text/javascript"> 
  $(function() {
    moveScroller();
  });
</script>

And a simple live demo.

A nascent, script-free alternative is position: sticky, which is supported in Chrome Canary and WebKit nightly. See the article on HTML5Rocks and this demo.

Fixed Navbar under non-fixed header

3 Answers3