So here is what I am trying to do:
所以这就是我想要做的:
I want a landing page with a fixed header. If the user scrolls down the page y px, I want to resize the header to x px. If the user scrolls up again and scrolls over the "line", it should resize to the original dimensions again. Here is my code:
我想要一个带有固定标题的登录页面。如果用户向下滚动页面y px,我想将标题的大小调整为x px。如果用户再次向上滚动并滚动“线”,则应再次调整为原始尺寸。这是我的代码:
$(document).scroll(function(){
if($(document).scrollTop() > 300) {
$("#header").animate({height: "50px"}, 400);
}
else {
$("#header").animate({height: "200px"}, 400);
}
console.log($(document).scrollTop());
}); #header {
background-color: coral;
display: flex;
justify-content: space-around;
height: 200px;
align-items: center;
position: fixed;
width: 100%;
z-index: 1337;
}
<html>
<body>
<div id="header">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<div class="white-space">
<h2>Some Content</h2>
</div>
<div class="image">
<img src="img/rsz_hnck8766.jpg">
<div class="overlay"></div>
</div>
<div class="white-space">
<h2>Some Content</h2>
</div>
<div class="image">
<img src="img/2.jpg">
<div class="overlay"></div>
</div>
<div class="white-space">
<h2>Some Content</h2>
</div>
</body>
<script src="includes/jquery-2.1.4.js"> </script>
</html>Now, my code does work to make the header smaller on scroll down, and so does it when I scroll up but with a HUGE delay. When I scroll up and I'm at scrollTop 0, it takes a couple of seconds before it resizes again. I figured it may be that it has to calculate all of the other scrollTop values before it gets to one that makes the header bigger again. How would I improve the code, so that it works without a delay?
现在,我的代码确实可以在向下滚动时缩小标题,当我向上滚动但是有一个巨大的延迟时它也是如此。当我向上滚动并且我在scrollTop 0时,它需要几秒钟才能再次调整大小。我想可能是它必须计算所有其他scrollTop值才能获得一个使标题再次变大的值。我如何改进代码,以便它可以毫无延迟地工作?
1 个解决方案
#1
0
as @adeneo mentioned in comment .. you can use another if statement
正如@adeneo在评论中提到的那样..你可以使用另一个if语句
$(document).scroll(function(){
if($(document).scrollTop() > 300) {
if($("#header").height() == 200){
$("#header").animate({height: "50px"}, 400);
}
}
else {
if($("#header").height() == 50){
$("#header").animate({height: "200px"}, 400);
}
}
console.log($(document).scrollTop());
});
#1
0
as @adeneo mentioned in comment .. you can use another if statement
正如@adeneo在评论中提到的那样..你可以使用另一个if语句
$(document).scroll(function(){
if($(document).scrollTop() > 300) {
if($("#header").height() == 200){
$("#header").animate({height: "50px"}, 400);
}
}
else {
if($("#header").height() == 50){
$("#header").animate({height: "200px"}, 400);
}
}
console.log($(document).scrollTop());
});