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

Posted 2023-04-13

【中文标题】如何在页面顶部保留导航栏？

【英文标题】：how do I keep a nav bar at the top of the page?

【发布时间】：2013-01-01 16:40:01

【问题描述】：

我正试图让我的导航栏像forbes.com 一样停留在页面顶部

我知道我能做到

nav

   position: fixed;
   top: 0;

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

This is my site

【问题讨论】：

他们正在使用 javascript/jQuery 来处理这个问题——你可以看到“容器大”类的样式在它到达页面顶部时会切换。当它到达顶部时，它变得固定，否则它是相对的 --- 你愿意使用 Jquery 吗？

我愿意使用 jquery，即使我还没有真正编写过代码——我对 CSS 和 html 非常熟悉？会足够简单吗？代码会是什么样子？

基本前提是这样的：获取header的高度（在nav之上）获取窗口的位置（整个文档）。当 window 的位置大于 header 高度的位置时，给 nav 一个新的样式 position:fixed。不幸的是，我没有足够的时间来实际编写它。

感谢您的帮助 - 我希望能够解决这个问题：D

如果您不介意使用框架，请查看Twitters Bootstrap。只需很少的开发人员努力，它就可以做到这一点以及许多其他非常酷的事情。

【参考方案1】：

解决方法很简单，在添加像素的同时保留你的css

nav

   position: fixed;
   top: 0px;

【参考方案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/

【讨论】：

谢谢，工作正常。易于集成和理解。但我只使用了标签“nav”和“nav”和“.fixed”两种样式。剩下的元素，它们是用来做什么的？

【参考方案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>

【参考方案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 具有正值，则它具有最高优先级，否则具有最低优先级（对于负值）。 我希望这会有所帮助。

【参考方案5】：

你可以使用：

nav

   position: fixed;
   top: 0;
   left: 0;

请看这个完整的例子：

* 
    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>

【参考方案6】：

nav 
    position: sticky;
    top: 0;

【讨论】：

请提供有关您的答案的更多详细信息。

【参考方案7】：

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

【讨论】：

这不是你想要的吗？控制栏距屏幕顶部的距离？它对我有用，我一直在使用它。

好的，所以福布斯使用固定位置，问题是在平板电脑和手机上不起作用。这就是我使用绝对定位的原因。

当你向下滚动时，它仍然是距离顶部 X px，在条形上方留下 X px 的间隙。这不是 OP 示例的工作方式。最初距离顶部 X px，但当您向下滚动时，距离顶部 0px。

是的，这只是一个小 javascript 来检测滚动顶部位置并更改主包装元素的顶部 CSS 规则。

这就是我一直这样做的方式，并且 js 是一个 if/else with document.getElementById("navbar").style.position = "fixed/relative";甚至不需要更改“top: 0;”，你可以用页脚做同样的事情。我总是添加“z-index：1；”不过。

【参考方案8】：

在您的 css 文件中：

body 
    padding-top: 0px;

【讨论】：

但是兄弟，这与修复顶部的导航无关。