固定标题下的固定导航栏

Question

我的站点由四个div组成；它们的顺序是：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的滚动上获得粘性导航栏，你必须制作两个导航栏，一个在顶部，一个在底部。

上面的一个是“粘性的”，坐在头部后面，而另一个只是像平常一样放在头部下面，不是粘性的。

​

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中都是受支持的。请参阅article on HTML5Rocks和this demo。