如何使導航欄固定在 html 和 css 中？

Question

我正在設計一個網站，我希望將導航欄固定在我的頁面上，這樣您就不必一直向上滾動來瀏覽網站。 我知道如何使用例如position: fixed; 等但是找不到可行的解決方案

索引.html：

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<link rel='shorcut icon' type='image/x-icon' href='circle.ico' />
</head>
<body>

<title>Home</title>

<div class="header">
  <h3 class="logo" id='logo'>Name</h3>
  <input type="checkbox" id="chk">
  <label for="chk" class="show-menu-btn">
    <i class="fas fa-ellipsis-h"></i>
  </label>

  <ul class="menu" id='navbar'>
    <a href="#section1">Home</a>
    <a href="#section2">About</a>
    <a href="#">Calendar</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
    <label for="chk" class="hide-menu-btn">
      <i class="fas fa-times"></i>
    </label>
  </ul>
</div>


</div>

</body>
</html>

樣式.css：

body {
  background-image: url('img5.jpg');
  background-repeat: no-repeat;
}

*{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
}
.header{
  height: 100px;
  background: #34495e;
  padding: 0 20px;
  color: #fff;
}
.logo{
  line-height: 100px;
  float: left;
  text-transform: uppercase;
}

.menu{
  float: right;
  line-height: 100px;
}
.menu a{
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 10px;
  transition: 0.4s;
}
.show-menu-btn,.hide-menu-btn{
  transition: 0.4s;
  font-size: 30px;
  cursor: pointer;
  display: none;
}
.show-menu-btn{
  float: right;
}
.show-menu-btn i{
  line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover{
  color: #3498db;
}

#chk{
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}

.content{
  padding: 0 20px;
}
.content img{
  width: 100%;
  max-width: 700px;
  margin: 20px 0;
}
.content p{
  text-align: justify;
}

@media screen and (max-width:800px) {
  .show-menu-btn,.hide-menu-btn{
    display: block;
  }
  .menu{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #333;
    right: -100%;
    top: 0;
    text-align: center;
    padding: 80px 0;
    line-height: normal;
    transition: 0.7s;
  }
  .menu a{
    display: block;
    padding: 20px;
  }
  .hide-menu-btn{
    position: absolute;
    top: 40px;
    right: 40px;
  }
  #chk:checked ~ .menu{
    right: 0;
  }
}

.card {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 100%;
}

.container {
  padding: 2px 16px;
}
p {
  font-size: 120%;
}

h4 {
  font-size: 130%;
}

我嘗試過的事情：

.menu {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}

.menu {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  z-index: 1030;
}

任何幫助將不勝感激！

謝謝：！！ :D

Answer 1

您不需要 z-index。 同樣禁用滾動功能會使您的 header 保持在頂部，但這只是因為網站根本無法滾動。

您遇到的主要問題是導航欄是獨立於 header 並且不能離開 header 容器。

因此，從 ehder 中排除導航欄並在其上使用前 0 的粘性；

 .menu { position: sticky; top: 0; background-color: red; }

 <title>Home</title> <div class="header"> <h3 class="logo" id='logo'>Name</h3> <input type="checkbox" id="chk"> <label for="chk" class="show-menu-btn"> <i class="fas fa-ellipsis-h"></i> </label> </div> <ul class="menu" id='navbar'> <a href="#section1">Home</a> <a href="#section2">About</a> <a href="#">Calendar</a> <a href="#">News</a> <a href="#">Contact</a> <label for="chk" class="hide-menu-btn"> <i class="fas fa-times"></i> </label> </ul> <div> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div>

Answer 2

添加到 header position：固定和寬度 100%。 之后為頁面內容設置上邊距，以便 header 不會與內容重疊。

索引.html

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<link rel='shorcut icon' type='image/x-icon' href='circle.ico' />
</head>
<body>

<title>Home</title>

<div class="header">
  <h3 class="logo" id='logo'>Name</h3>
  <input type="checkbox" id="chk">
  <label for="chk" class="show-menu-btn">
    <i class="fas fa-ellipsis-h"></i>
  </label>

  <ul class="menu" id='navbar'>
    <a href="#section1">Home</a>
    <a href="#section2">About</a>
    <a href="#">Calendar</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
    <label for="chk" class="hide-menu-btn">
      <i class="fas fa-times"></i>
    </label>
  </ul>
</div>
<div class="content">

</div>

</body>
</html>

樣式.css：

.header{
  position: fixed;
  width: 100%;
  height: 100px;
  background: #34495e;
  padding: 0 20px;
  color: #fff;
}
.content{
  margin-top: 100px;
}

我希望這會有所幫助。

如何使導航欄固定在 html 和 css 中？

問題描述

2 個解決方案

解決方案1
1 2020-12-03 12:21:27

解決方案2
1 已采納 2020-12-03 12:33:23

如何使導航欄固定在 html 和 css 中？

問題描述

2 個解決方案

解決方案1 1 2020-12-03 12:21:27

解決方案2 1 已采納 2020-12-03 12:33:23

解決方案1
1 2020-12-03 12:21:27

解決方案2
1 已采納 2020-12-03 12:33:23