Question

您能不能给我一些提示，如何在向上和向下滚动时使下拉菜单消失？

在纯粹的js中找到它有点困难。只需遵循什么样的路径，我就会弄清楚自己。

＆＃13;

window.onsrcoll = function(){
     var position = 0;
     var scPos = (this.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0);
     position += scPos;
     if(position > scPos) {
      // code here to hide drop-down menu.
     }
    }

＆＃13;

/* on smaller size screens when it becomes drop down menu */
@media(max-width: 880px) {
#navi {
  display: none;
}
.navWrapper label[for="mygtukas"] {
  background: url(images/open.png);
  background-size: 100% 100%;
  display: block;
  width: 55px;
  height: 45px;
  cursor: pointer;
  position: absolute;
  right: 2%;
  filter: invert(85%);
  transition: all 0.5s;
}
.navWrapper input[type="checkbox"]:checked ~ #navi {
  display: block;
  user-select: none;
  position: absolute;
}

＆＃13;

    <div class="navWrapper" >
			<h1 id="myLogo"><span class="initial">E.</span><span class="name">Erlandas</span> Petronis</h1>
			<div class="shadow"></div>
			<label for="mygtukas" id="icon"></label>
			<input type="checkbox" id="mygtukas">
			<ul id="navi">
				<li id="li"><a id="link" class="active" href="#home">Home</a></li>
				<li id="li"><a id="link" href="#about">About</a></li>
				<li id="li"><a id="link" href="#portfolio">Portfolio</a></li>
				<li id="li"><a id="link" href="#contact">Contact</a></li>
			</ul>
		</div>

＆＃13;

JS不起作用，至少没有意义，或者我不在这里？

Answer 1

我可以看到你想让下拉菜单在向下滚动时消失。

一种方法是使用Javascript。

您可以执行的操作是getElementById更改导航栏顶部的样式，使其在向下滚动时消失。

您可以在javascript中执行以下操作：

＆＃13;

var position = window.pageYOffset;
window.onsrcoll = function(){
     var scPos = window.pageYOffset;
     if(position>scPos) {
     	document.getElementById("navbar").style.top = "0";
     } else {
     	document.getElementById("navbar").style.top = "-50px";
     }
      position = scPos;
    }

＆＃13;

要实现此功能，您必须为导航栏position: fixed;和top: 0;

Hide menu on scroll

仅在滚动JS上隐藏下拉菜单

1 个答案: