スクロールダウンするときにナビゲーションバーがフェードするのを防ぐにはどうすればいいですか?HTML、CSS、Javascriptを使用できます。私の検索では、これを行う方法の例をいくつか見てきましたが、ナビゲーションバーにはdiv要素があり、コード内にこれらの関数を実装する方法がわかりません。スクロールダウンした際にフェードしたナビゲーションバー
HTML:
<li><a href="#" id="i">Hiking</a></li>
<li><a href="">Surfing</a></li>
<li><a href="">Scuba Diving</a></li>
<li><a href="">Camping</a></li>
<li style="float:right; margin:10px;">
<form method="GET" action="https://maps.google.com?" target="_blank">
<input type="submit" value="Search location">
</form>
</li>
</ul>
</nav>
CSS:
nav {
margin: 0 0 0 0;
font-family: sans-serif;
font-size: 100%;
width: 100%;
overflow: hidden;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
text-align: center;
vertical-align: top;
margin-top: 130px;
}
* {
margin: 0;
padding: 0;
line-height: 1.5;
position: sticky;
top: -130px;
}
#nav li {
float: left;
border-right: 1px solid;
}
#nav a {
display: block;
color: white;
text-align: center;
width: 100px;
padding: 10px;
text-decoration: none;
}
あなたはこれを試してみましたか? https://stackoverflow.com/questions/36448800/how-to-show-or-hide-a-menu-when-i-scroll-down-or-up –
http://jsfiddle.net/vp7chr47/2/私は答えからこれを見つけましたが、私のコードにそれを書く方法はわかりません。 – inoi