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

Question

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

我知道我能做到

nav
{
   position: fixed;
   top: 0;
}

但是导航栏不在页面顶部，它位于徽标之后...但是，当您向下滚动时，我希望导航栏粘在屏幕顶部..

这是我的网站

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

查询：

$(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

You can use:

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

See this complete example example:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

#header {
    width: 100%;
    height: 90vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 60px 12px;
}

header nav {
    width: 100%;
    height: 10vh;
    background-color: #262534;
    display: grid;
    align-items: center;
    border-bottom: 4px solid #F9690E;
    position: fixed;
    top: 0;
    left: 0;
}

header .nav-item {
    display: inline;
    margin: 0 8px;
}

header .nav-item:first-of-type {
    margin-left: 48px;
}

header .nav-item a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

header .nav-item a:hover {
    text-decoration: underline;
}

header #more-drop-down-menu a:last-of-type:hover {
    text-decoration: none;
}

header .nav-item a.active {
    text-decoration: underline;
    color: #F9690E;
}

/** menu**/
menu{
  margin-top:14vh;
  text-align: center;
}
menu p{
  font-size: 14px;
  line-height:125%;
  padding: 25px;
}

<header>
         
        <!-- Start Nav -->
        <nav>
            <ul>
                <li class="nav-item"><a href="#Home" class="active">Home</a></li>
                <li class="nav-item"><a href="#About">About</a></li>
                <li class="nav-item"><a href="#Contact">Contact</a></li>
                <!-- END Drop Down Menu -->

            </ul>
        </nav>
        <!-- End Nav -->   
    </header>
 <menu>
 <h1> Example of fixed nav</h1>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque exercitationem ipsa quisquam sunt ex blanditiis iure vero molestias impedit recusandae eius quasi unde assumenda molestiae, dolorem illum, aliquid aut neque?
         Error aut voluptatum molestias ad quidem odio labore eaque veniam fugiat earum, aliquid incidunt beatae nam pariatur minus voluptates atque suscipit cupiditate et! Tenetur eveniet delectus aspernatur? Perferendis, modi similique.
         Debitis eaque suscipit tenetur, laboriosam perferendis possimus voluptas expedita labore aspernatur. Nobis cum vel quae voluptates pariatur architecto quas labore assumenda ipsam sint tenetur, nisi in non alias quisquam atque.
         Animi, exercitationem ullam laudantium dolores praesentium distinctio illo, fugiat iusto soluta quibusdam eius? Quaerat reiciendis voluptatum voluptatibus porro saepe blanditiis nam iure odio soluta, cum ipsam, suscipit molestiae natus eius!
         Quasi, quae harum? Fuga facere facilis, cumque veniam voluptatum itaque aspernatur natus ratione nesciunt dolores qui, iste ullam dolorem totam accusantium officiis nisi hic esse reiciendis molestias. Unde, inventore fugiat?
         Corrupti similique consequatur provident aliquam voluptates minima modi voluptatibus exercitationem magni, consectetur delectus? Rerum quo cumque dolorem voluptatibus tempora, nesciunt laboriosam eum assumenda deserunt error ullam asperiores velit suscipit corrupti!
         Perspiciatis architecto illo quis dolore necessitatibus ad accusantium voluptatem esse ducimus! Modi facilis consequuntur mollitia asperiores praesentium. Tempora vero quod aliquam, alias quis, nisi cumque totam sed odit, hic suscipit.
         Aut molestias minus accusantium, cumque, aspernatur quia aliquam accusamus nostrum saepe, eius vero velit. Labore a deserunt voluptate illo, eum eos, ad saepe, eius temporibus quis eaque ea reiciendis soluta!
     </p>
 </menu>

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

这是一种不使用 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 6

nav {
    position: sticky;
    top: 0;
}

Answer 7

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

Answer 8

在您的 css 文件中：

body {
    padding-top: 0px;
}