Question

我的网站由四个div组成;它们是：header，navbar，main和footer。

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

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

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

Answer 1

#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中得到支持。请参阅article on HTML5Rocks和this demo。

修复了非固定标题下的Navbar

3 个答案: