vue导航栏顶部导航

If you're working on the Product Landing Page project and are having trouble with some of the user stories, you're not alone.

如果您正在从事“ 产品着陆页”项目，并且遇到一些用户故事方面的麻烦，那么您并不孤单。

User story #13 gives a lot of people trouble. It reads:

用户故事＃13给很多人带来麻烦。 内容为：

The navbar should always be at the top of the viewport.

导航栏应始终位于视口的顶部。

非固定的普通导航栏 (Non-fixed, normal navbar)

Imagine you have the following HTML:

假设您有以下HTML：

...
<header id="header">
  <img src="https://static1.squarespace.com/static/54d3e88ce4b0be204d0da36a/t/566f5b70bfe873371e44c7b0/1525197822184/" alt="logo" id="header-img">
  <nav id="nav-bar">
    <ul> 
      <li><a href="#about-us" class="nav-link">About Us</a></li>
      <li><a href="#videos" class="nav-link">Demo</a></li>
      <li><a href="#photos" class="nav-link">Photo Gallery</a></li>
      <li><a href="#contact-us" class="nav-link">Contact</a></li>
  </nav>
</header>
...

But when you scroll down the page, the navbar eventually leaves the view:

但是，当您向下滚动页面时，导航栏最终会离开视图：

如何创建固定的导航栏 (How to create a fixed navbar)

To create a fixed navbar, or a navbar that's always at the top of the viewport even as you scroll down the page, there are a few things you need to do.

要创建固定的导航栏，或者即使在向下滚动页面时，导航栏始终位于视口的顶部，您需要做一些事情。

First, target the header and fix it to the page with the following rule:

首先，定位标头并使用以下规则将其固定到页面：

header {
  position: fixed;
}

You'll notice that the navbar contracts to its default width, so set its width to the full width of the page:

您会注意到导航栏会收缩为其默认宽度，因此请将其宽度设置为页面的整个宽度：

header {
  position: fixed;
  width: 100%;
}

Depending on the display properties of the other elements, you may need to manually set the top and left positions of the navbar:

根据其他元素的display属性，您可能需要手动设置导航栏的top和left位置：

header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

Then all you need to do is apply some extra styling to get things looking good:

然后，您需要做的就是应用一些额外的样式来使外观看起来更好：

header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #cc0000;
  color: white;
  font-family: 'Exo 2', sans-serif;
  padding: 1em;
}

固定的导航栏-结果 (Fixed navbar — the result)

After that, your navbar should still be visible even as you scroll down the page:

之后，即使向下滚动页面，导航栏仍应可见：

翻译自: https://www.freecodecamp.org/news/how-to-keep-a-navbar-at-the-top-of-my-viewport/

vue导航栏顶部导航