当你向上滚动而不是向下滚动时显示菜单
当你向上滚动而不是向下滚动时显示菜单
提问于 2022-09-24 06:29:56
目标：
向下滚动时，不应显示菜单页。
但是，当您向上滚动时，页面应该显示。
问题：
创造它的过程的确很顺利。我该怎么解决呢？
Jsbin：
https://jsbin.com/bemefejayu/edit?html,css,js,output
谢谢!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<body>
<div id="container">
<div id="top-content" class="palette-1">
<div id="testtest">
<img src="https://www.logolynx.com/images/logolynx/1f/1fa1c2a2ea0d69a85215d878f3a0652a.jpeg" width="100px" height="45px" />
</div>
<ul id="iconmenu" class="nav-menu">
<li class="title">Coffee</li>
<li class="title">Tea</li>
<li class="title">Milk</li>
</ul>
</div>
<div id="content" class="palette-2">
content
<br />
content
<br />
content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> <br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> <br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
<br /> content
</div>
<div id="footer" class="palette-4">
footer
</div>
</div>
</body>
</html>body {
color: white;
text-align: center;
box-sizing: content-box;
margin: 0;
}
.palette-1 {
background-color: #83B2FF;
}
.palette-2 {
background-color: #8BF18B;
}
.palette-4 {
background-color: #FF8650;
}
.palette-5 {
background-color: #FF555E;
}
#content {
grid-area: content;
}
#footer {
grid-area: footer;
}
@media only screen and (min-width: 1000px) {
#container {
background-color: #FFE981;
width: 100%;
display: grid;
grid-template-areas:
"left-header header right-header"
"left-content content right-content"
"left-footer footer right-footer";
row-gap: 1rem;
grid-template-columns: 1fr 1000px 1fr;
grid-template-rows: auto auto auto;
grid-gap: 5px;
box-sizing: border-box;
height: 100%;
background-color: #8cffa0;
}
#top-content {
/* */
overflow: hidden;
position: fixed;
width: 100%;
height: 50px;
grid-area: header;
display: flex;
align-items: center;
justify-content: center;
}
#content {
margin-top: 50px;
}
#asdfasdf {
display: none;
}
ul.nav-menu {
margin: 0;
}
ul.nav-menu > li {
display: inline-block;
padding: 0 10px 0 10px;
margin: 0;
line-height: 70px;
border-top: 1px solid #83B2FF;
}
ul.nav-menu > li:hover {
background-color: #2779BF;
border-top: 1px solid #425c62;
}
}
@media only screen and (max-width: 999px) {
#container {
background-color: #FFE981;
width: 100%;
display: grid;
grid-template-areas:
"header"
"content"
"footer";
row-gap: 1rem;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
background-color: #8cffa0;
}
#top-content {
grid-area: header;
display: flex;
align-items: center;
justify-content: center;
border-top: 3px solid #425c62;
}
#asdfasdf {
display: none;
}
ul.nav-menu {
margin: 0;
}
ul.nav-menu > li {
display: inline-block;
padding: 0 10px 0 10px;
margin: 0;
line-height: 70px;
border-top: 1px solid #83B2FF;
}
ul.nav-menu > li:hover {
background-color: #2779BF;
border-top: 1px solid #425c62;
}
#content {
}
} window.onscroll =函数(){ scrollFunction() }；
function scrollFunction() {
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 50) {
document.getElementById("top-content").style.marginTop = "-50px";
document.getElementById("logo").style.fontSize = "25px";
} else {
document.getElementById("top-content").style.marginTop = "0";
document.getElementById("logo").style.fontSize = "35px";
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-24 07:31:18
试试这个：
<script>
window.onscroll = function () {
scrollFunction();
};
// get initial pageYOffset value
let originOffset = window.pageYOffset;
function scrollFunction() {
// current pageYOffset value
const curOffset = window.pageYOffset;
if (curOffset - originOffset > 0) {
// down
document.getElementById('top-content').style.display = 'none';
} else {
// up
document.getElementById('top-content').style.display = 'block';
}
// change originOffset value every time
originOffset = window.pageYOffset;
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73835187
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号