Question

我想创建一个在点击链接时显示的div，并在点击同一个链接时关闭。当用户向下滚动时，该div也必须淡出，并且在用户再次点击同一链接之前消失。 HTML：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

JS（淡出/不起作用，不像基本的show / hide）如果有人知道如何解决这个问题：向下滚动时隐藏菜单并保持隐藏，直到用户再次点击链接

谢谢

Answer 1

在我看来，（因为你要求一种方法）使用jQuery进行这样的用户交互，几乎所有时间都是最聪明的事情。

您可以像这样开箱即用jQuery's fadeToggle()方法。

$("#dropnavbutton").click( function (){
    $(".paneldrop").fadeToggle();
});

要在滚动时使面板淡出，

$(window).on('scroll', function(e){ 
    var scroll = $(window).scrollTop();
    if(scroll > 200){
        $(".paneldrop").fadeOut(); 
    }
});

Answer 2

我建议您在页面中添加scroll listener。

这里有一些伪代码逻辑：

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

然后按原样保持当前显示/隐藏点击逻辑。

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

2 个答案: