修复了非固定标题下的导航栏

Question

我的网站由四个divs 组成；它们的顺序是：header、navbar、main 和 footer。

我希望标题保持在原位，并且导航栏在顶部时位于标题下方，但是当页面滚动时，我只希望导航栏粘在顶部。

我现在的代码 (http://jsfiddle.net/BGLwM/) 会发生什么，导航栏粘在顶部，但在标题的顶部。当我将顶部设置为标题的高度（将导航栏放在标题下方）并向下滚动时，会出现与标题一样宽的间隙，并且导航栏不会粘在顶部。

有没有办法在纯 CSS 中解决这个问题？我没有使用 Bootsrap，虽然使用 JS 或 JQuery 没有问题，但我没有任何使用经验。

Answer 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;
}

我做了一些修改，让标题和导航栏留在原处。这就是你所追求的吗？让我知道，我们可以进一步调整它。

您可以更改高度设置，我只是将它们变小以进行测试

Answer 2

为了在滚动时仅使用 HTML 和 CSS 获得粘性导航栏，您必须制作 2 个导航栏，一个在顶部，一个在底部。
顶部的一个是“粘性的”，位于页眉后面，而另一个只是像正常一样放在页眉下方并且不粘性。

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>

我今天遇到了同样的问题，所以我搜索了谷歌并没有找到。然后它击中了我。所以我搜索了一个类似的问题，所以我可以回答它（这是我的第一个答案）。
希望这会有所帮助。

Answer 3

以前有人问过这个问题。我将在这里（来自How can I make a div stick to the top of the screen once it's been scrolled to?）重新发布（几乎逐字）另一个用户的答案。它不是纯粹的 CSS——它也是 javascrpt 和 jquery 的混合体。但别担心。这是一个 youtube 视频，可帮助您在页面中实现 jquery。 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>

还有一个简单的live demo。

一个新兴的、无脚本的替代方案是 position:sticky，它在 Chrome Canary 和 WebKit nightly 中得到支持。请参阅article on HTML5Rocks 和this demo。