Question

我是Web开发的新手，我的一位家庭成员为我分配了一项“工作”练习。我在使用“粘性”功能时遇到了麻烦。这是一个带有下拉菜单的导航栏。当我尝试向下滚动以测试粘滞功能时，它将无法工作。

这是我的代码示例：

.nav {
  position: sticky;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: inline-block;
  min-width: 3990px;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

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

<body>
  <div class="nav" id="navbar">
    <ul>
      <li>
        <a href="First_Page.html">Home</a>
      </li>
      <li>
        <a href="">About Us</a>
      </li>
      <li class="dropdown" id="navbar">
        <a href="#" class="dropbtn">Dropdown</a>
        <div class="dropdown-content" id="navbar">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
  </div>
</body>

这是一个“原型”，所以请不要过分苛刻。

今天过得愉快。

Answer 1

改为尝试

.nav {
    position: fixed;
}

Answer 2

如果要使用粘性，则需要添加top或bottom属性。我建议您改用position: fixed。

body { /* just to see scroll */
  min-height: 200vh;
  background: linear-gradient(black, white);
}

.nav {
  position: sticky;
  top: 0.5rem; /* half the font size */
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: inline-block;
  min-width: 3990px;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

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

<body>
  <div class="nav" id="navbar">
    <ul>
      <li>
        <a href="First_Page.html">Home</a>
      </li>
      <li>
        <a href="">About Us</a>
      </li>
      <li class="dropdown" id="navbar">
        <a href="#" class="dropbtn">Dropdown</a>
        <div class="dropdown-content" id="navbar">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
  </div>
</body>

粘性导航栏功能不正常

2 个答案: