javascript - 单击时显示/隐藏下拉菜单，向下滚动时隐藏

Question

我想制作一个 div，它会在单击链接时显示，并在单击同一链接时关闭。当用户向下滚动时，该 div 也必须淡出，并消失，直到用户再次单击同一链接。 HTML:

var slidesource = document.getElementById('panel');

document.getElementById('dropnavbutton').onclick = function() {
  slidesource.className = slidesource.className ? '' : 'fade';
}

.paneldrop {
  display: none;
  position: fixed;
  top: 70px;
  left: 48.2%;
  transition: 0.3s linear 0s;
  overflow: hidden;
  z-index: 10;
}

.paneldrop li {
  display: block;
  margin-top: 20px;
  transition: 0.3s linear 0s;
}

.manjipaneldrop {
  background-color: black;
  height: 150px;
  width: 150px;
  transition: 0.3s linear 0s;
}

div#panel {
  opacity: 1;
  transition: opacity 1s;
}

div#panel.fade {
  opacity: 0;
}

.dropnav {
  color: #3a3a57;
  font-weight: bolder;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  padding: 10px 20px;
  background-color: #61b9f6;
  border-radius: 15px;
}

<li class="dropdown">
  <a id="dropnavbutton" class="linknav" onclick="dropdownmenu()">Explore</a>
  <div class="paneldrop" id="panel">
    <div class="littlepaneldrop">
      <ul>
        <li><a class="dropnav" href="#">Culture</a></li>
        <li><a class="dropnav" href="#">History</a></li>
        <li><a class="dropnav" href="#">Nature</a></li>
      </ul>
    </div>
  </div>
</li>

JS(淡出/淡入不起作用，不像基本的显示/隐藏)如果有人知道如何解决这个问题:向下滚动时隐藏菜单，直到用户再次单击链接时它才会保持隐藏状态。

谢谢

Answer 1

我建议添加 scroll listener到您的页面。

这是一些伪代码逻辑:

ScrollListenerOnWindow() { // Fires whenever the page is scrolled
    if (panelDrop is visible) {
        // Make it not visible
    }
}

并且保持当前的显示/隐藏点击逻辑不变。