如何在页面顶部保留导航栏？

Question

我正试图让我的导航栏保持在页面的顶部，就像在forbes.com上一样

我知道我能做到

nav
{
   position: fixed;
   top: 0;
}

但导航栏不在页面的顶部，它出现在徽标之后......但是当你向下滚动时，我希望导航栏粘在屏幕的顶部。

This is my site

Answer 1

解决方案很简单，在添加px时保持你的CSS

nav
{
   position: fixed;
   top: 0px;
}

Answer 2

你可以在JQuery中尝试这样：

HTML：

<div id="wrapper">

    <header>
        <h1>Floater Navigation</h1>
    </header>

    <nav>
        <p>Navigation Content</p>
    </nav>

    <div id="content">
            <p>Lorem Ipsum.</p>
    </div>
</div>

CSS：

#wrapper {
    width:940px;
    margin: 0 auto;
}

header {
    text-align:center;
    padding:70px 0;
}

nav {
    background: #000000;
    height: 60px;
    width: 960px;
    margin-left: -10px;
    line-height:50px;
    position: relative;
}

#content {
    background: #fff;
    height: 1500px; /* presetting the height */
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.fixed {
    position:fixed;
}

JQuery的：

$(document).ready(function() {

    // Calculate the height of <header>
    // Use outerHeight() instead of height() if have padding
    var aboveHeight = $('header').outerHeight();

    // when scroll
    $(window).scroll(function(){

        // if scrolled down more than the header’s height
        if ($(window).scrollTop() > aboveHeight){

            // if yes, add “fixed” class to the <nav>
            // add padding top to the #content 
            // (value is same as the height of the nav)
            $('nav').addClass('fixed').css('top','0').next().css('padding-top','60px');

        } else {

            // when scroll up or less than aboveHeight,
            // remove the “fixed” class, and the padding-top
            $('nav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});

来源：http://www.jay-han.com/2011/11/10/simple-smart-sticky-navigation-bar-with-jquery/

Answer 3

这是一种没有JQuery的方法。它的工作原理是将滚动侦听器设置到窗口，并在滚动到达正确位置时切换导航栏的类。

var body = document.getElementsByTagName("body")[0];
var navigation = document.getElementById("navigation");

window.addEventListener("scroll", function(evt) {
  if (body.scrollTop > navigation.getBoundingClientRect().bottom) {
    // when the scroll's y is bigger than the nav's y set class to fixednav
    navigation.className = "fixednav"
  } else { // Overwise set the class to staticnav
    navigation.className = "staticnav"
  }
});

h1 {
  margin: 0;
  padding: 10px;
}
body {
  margin: 0px;
  background-color: white;
}
p {
  margin: 10px;
}
.fixednav {
  position: fixed;
  top: 0;
  left: 0;
}
.staticnav {
  position: static;
}
#navigation {
  background-color: blue;
  padding: 10px;
  width: 100%;
}
#navigation a {
  padding: 10px;
  color: white;
  text-decoration: none;
}

<h1>
Hello world
</h1>
<nav id="navigation" class="staticnav"><a href="#">Home</a>  <a href="#">About</a>
</nav>
<!-- We initialize the nav with static condition -->
<p>
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
</p>

Answer 4

这是导航栏在滚过它后如何粘到顶部的方式。

.affix {
	top: 0px;
	margin: 0px 20px;
}
.affix + .container {
	padding: 5px;
}

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="50">
...
</nav>

“navbar”会自己创建一个块，所以你要做的只是提到css文件中的边距

.navbar {
margin: 0px auto; /*You can set your own margin for top-bottom & right-left respectively*/
z-index: 1;
}

z-index设置该特定元素的优先级，以便其他元素不会滚动它。如果z-index具有正值，则它具有最高优先级，否则具有最低优先级（对于负值）。我希望这是有帮助的。

Answer 5

在你的css文件中：

body {
    padding-top: 0px;
}

Answer 6

使用绝对位置并将顶部值设置为希望导航栏位于浏览器顶部的像素数。