如何将我的flexbox导航栏固定在屏幕顶部？

Question

什么是一些非hacky（或非常hacky）的方法，使我的flexbox导航栏固定在屏幕的顶部，这样它仍然响应，但无论我滚动多远，我仍然可以看到导航栏。

以下是我的代码：

＆＃13;

＆＃13;

.navbar {
  display: flex;
  background: #e74c3c;
  height: 60px;
  font-family: 'Nova Flat', cursive;
}

.navitem {
  flex: 1;
  position: relative;
  top: 2vh;
  font-size: 1.7em;
  margin-left: 5vw;
}

.navitem a {
  text-decoration: none;
  color: white;
}

.dropdown-content {
  display: none;
  z-index: 1;
  color: black;
  font-size: 0.7em;
}

.dropdown-content a {
  color: black;
}

.dropdown:hover .dropdown-content {
  display: inline-block;
}

＆＃13;

<div class="navitem"><a href="#">LOGO</a></div>
<div class="navitem"><a href="/search">Find Books</a></div>

<div class="dropdown navitem">
  <a class="profile">My Account</a>
  <div class="dropdown-content">
    <p><a href="/:user_id/profile">My Profile</a></p>
    <p><a href="/<%= current_user.id %>">My Bookshelf</a></p>
    <p><a href="/<%= current_user.id %>/add_a_book">Add a new book to your list</a></p>
    <p><a href="/<%= current_user.id %>/book_list">Detailed Book List</a></p>
    <p>
      <%= link_to "Sign Out", destroy_user_session_path, :method => :delete %>
    </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需给navbar一个固定的位置即可：

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

Answer 2

提供navbar（您甚至不包括在HTML代码中，BTW ...）position: fixed,和width: 100%，并将内容设为padding-top至少与导航栏高度一样高，因此导航栏不会隐藏内容的第一行。

另外，将margin: 0添加到html和body以防止显示的默认边距。

html, body {
  margin:0;
}
.navbar {
  position: fixed;
  width: 100%;
  display: flex;
  background: #e74c3c;
  height: 60px;
  font-family: 'Nova Flat', cursive;
}

.navitem {
  flex: 1;
  position: relative;
  top: 2vh;
  font-size: 1.7em;
  margin-left: 5vw;
}

.navitem a {
  text-decoration: none;
  color: white;
}

.dropdown-content {
  display: none;
  z-index: 1;
  color: black;
  font-size: 0.7em;
}

.dropdown-content a {
  color: black;
}

.dropdown:hover .dropdown-content {
  display: inline-block;
}

.content {
  padding-top: 60px;
  height: 1200px;
  background: yellow;
}

<div class="navbar">
  <div class="navitem"><a href="#">LOGO</a></div>
  <div class="navitem"><a href="/search">Find Books</a></div>

  <div class="dropdown navitem">
    <a class="profile">My Account</a>
    <div class="dropdown-content">
      <p><a href="/:user_id/profile">My Profile</a></p>
      <p><a href="/<%= current_user.id %>">My Bookshelf</a></p>
      <p><a href="/<%= current_user.id %>/add_a_book">Add a new book to your list</a></p>
      <p><a href="/<%= current_user.id %>/book_list">Detailed Book List</a></p>
      <p>
        <%= link_to "Sign Out", destroy_user_session_path, :method => :delete %>
      </p>
    </div>
  </div>
</div>
<div class="content">
  lots of content here...
</div>