时间戳

首页 > 解决方案 > 粘性导航栏功能失调

javascript - 粘性导航栏功能失调

问题描述

我对 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>

这是一个“原型”，所以请不要太苛刻地判断它。

祝你今天过得愉快。

标签： javascripthtmlcss

解决方案

如果要使用粘性，则需要添加topor属性。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>

推荐阅读