我正在尝试使响应式导航栏和标头隐藏在滚动条中，但通过动画隐藏，因此看起来很平滑。当我向下滚动时，效果很好，但是当我向上滚动时，它们不再出现。
$(document).ready(function() {
$(".content-container").scroll(function() {
if ($(this).scrollTop() > 0) {
$(".header").animate({
top: '-165px'
})
$(".navbar").animate({
top: '-165px'
})
$(".content-container").animate({
marginTop: '30px'
})
} else if ($(this).scrollTop() === 0) {
$(".header").animate({
top: '0px'
})
$(".navbar").animate({
top: '0px'
})
$(".content-container").animate({
marginTop: '130px'
})
}
});
});body {
margin: 0;
background-repeat: no-repeat;
background-size: cover;
}
.main-container {
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 165px;
width: 100%;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
background-color: #373536;
}
.navbar {
width: 100%;
position: fixed;
background-color: #585555;
height: 30px;
display: flex;
align-items: center;
margin-top: 165px;
box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.2), 0 3px 25px 0 rgba(0, 0, 0, 0.19);
font-size: 16px;
font-family: "Lato", Arial, Helvetica, sans-serif;
}
.navbar a {
text-decoration-line: none;
display: flex;
height: 100%;
width: 100%;
color: white;
align-items: center;
justify-content: center;
text-decoration: none;
}
.content-container {
height: 100%;
margin-top: 195px;
display: flex;
flex-direction: column;
overflow-y: scroll;
color: black;
font-family: "Comic Sans MS", cursive, sans-serif;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
<div class="header">
<div class="logo">
<img src="somePath" alt="headerPicture" />
</div>
</div>
<div class="navbar">
<a href="#" id="homeLink" class="active">
<span>Home</span>
</a>
<a href="#" id="deliveryLink">
<span>Delivery</span>
</a>
<a href="#" id="postLink">
<span>Post</span>
</a>
<a href="#" id="recepiesLink">
<span>Recepies</span>
</a>
<a href="#" id="contactLink">
<span>Contact</span>
</a>
</div>
<div class="content-container">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
<br> ////I copy paste a lot of this, i don't have content at the moment
</div>
</div>
但是如果我让时间过去，它会向下动画，也许这是我不知道的有关Jquery动画或类似内容的东西。
我还把console.log("enters?")放在了else的开头，当我向上滚动时它会打印出来，但是我必须等待元素下降
答案 0 :(得分：1)
我从一开始就重新启动所有内容，因此诸如“影子框”之类的内容和导航栏项未集中化，您需要制作一个“ div”并在导航栏上方放置横幅，但这是
<script>console.log( {{Inside TXT}} )</script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
background-color: #f1f1f1;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #585555;
position: fixed;
top: 165px;
width: 100%;
display: block;
transition: top 0.5s;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 16px;
font-family: "Lato", Arial, Helvetica, sans-serif;
}
#content{
margin-top: 195px;
color: black;
font-family: Comic Sans MS, cursive, sans-serif;"
}
</style>
</head>
<body>
<div id="navbar">
<a href="#home"> Home </a>
<a href="#" id="deliveryLink"> Delivery </a>
<a href="#" id="postLink"> Post </a>
<a href="#" id="recepiesLink"> Recepies </a>
<a href="#" id="contactLink"> Contact </a>
</div>
<div id="content">
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
<br> ////////////////////I copy paste a lot of this, i don't have content at the moment
</div>
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "165px";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
</script>
</body>
</html>
答案 1 :(得分：0)
我查看了您的程序，我没有尝试在您的程序中引入js，但是您可以这样做来修复您想要的内容，我对您想要的内容了解得不多，我知道我做了什么
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "165px";
} else {
document.getElementById("navbar").style.top = "-30px";
}
prevScrollpos = currentScrollPos;
}
我不知道为什么我只能聊天中的程序，但是我做了一段代码，但是没有任何内容可以运行，原因只是js，啊哈哈哈