Question

当我的navbar触摸屏幕顶部时，下拉菜单的链接消失了。

我使用了 w3schools 教程和示例来创建我的页面。特别是：

这是我的问题的示例：

window.onscroll = function() {
  myFunction()
};

var navbar = document.getElementById("navi");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

#navi {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

.drop {
  float: left;
  overflow: hidden;
}

.drop .dropbutton {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 20px 25px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

#navbar a:hover,
.drop:hover .dropbutton {
  background-color: #25aa25;
}

.links {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 210px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.links a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.links a:hover {
  background-color: #ddd;
}

.drop:hover .links {
  display: block;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+article {
  padding-top: 60px;
}

<body>
  <header>
    <h1>
      Example for StackOverflow
    </h1>
  </header>
  <nav id="navi">
    <div class="drop">
      <button class="dropbutton">
                Button - dropdown
            </button>
      <div class="links">
        <a href="">Random link 1</a>
        <a href="">Random link 2</a>
        <a href="">Random link 3</a>
      </div>
    </div>
  </nav>
  <article>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
  </article>
</body>

Answer 1

正确的问题是“ navbar不在屏幕顶部时为什么我们可以看到下拉列表？”。

navbar的CSS属性overflow设置为hidden，可防止内容超出其边界而变得可见。但是包含下拉链接（div）的.links已将position设置为absolute，因此不在文档流中。

来自MDN：

absolute

该元素从常规文档流中删除，并且在页面布局中没有为该元素创建空间。它相对于其最接近的祖先（如果有）定位。否则，它相对于初始包含块放置。

由于.links没有任何定位的祖先，因此其位置是相对于初始包含块的。

但是，当navbar触摸屏幕顶部时，将应用.sticky类。其主要功能是将position CSS属性设置为fixed（在文档流之外，并且相对于由视口建立的初始包含块定位）。

应用.sticky时，.links 相对于navbar 定位，因此它受overflow: hidden的影响。

由于在应用.sticky时不需要隐藏它，因此，请在发生这种情况时将overflow的{{1}}属性设置为navbar。

在CSS中，visible属性的优先级高于id，因此您有两个选择。更新class类：

.sticky

这将迟早导致an !important nightmare。或者更好的方法是，创建一个包含两个选择器的新规则，以赋予其更高的优先级：

.sticky {
  ...
  overflow: visible !important;
}

#navi.sticky {
  overflow: visible;
}

window.onscroll = function() {
  myFunction()
};

var navbar = document.getElementById("navi");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

#navi.sticky {
  overflow: visible;
} 

#navi {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

.drop {
  float: left;
  overflow: hidden;
}

.drop .dropbutton {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 20px 25px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

#navbar a:hover,
.drop:hover .dropbutton {
  background-color: #25aa25;
}

.links {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 210px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.links a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.links a:hover {
  background-color: #ddd;
}

.drop:hover .links {
  display: block;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+article {
  padding-top: 60px;
}

固定导航栏固定后，绝对定位的div隐藏

1 个答案: