CODEWITHSUNDEEP
htmlcssheadernavbar
ohitsanazn
ohitsanazn

Reputation: 247

Fixed Navbar under non-fixed header

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.

Upvotes: 1

Views: 9529

Answers (3)

user4196419
user4196419

Reputation:

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.

Upvotes: 1

user3246890
user3246890

Reputation: 139

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.

Upvotes: 0

Chou One
Chou One

Reputation: 627

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

Upvotes: 1

Related Questions