jQuery scrollTop检测需要很长时间
jQuery scrollTop detection takes very long
所以我要做的是:
我想要一个固定标题的登录页。如果用户向下滚动页面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>
现在,我的代码确实可以在向下滚动时使标题变小,当我向上滚动时也是如此,但有一个巨大的延迟。当我向上滚动并且处于scrollTop 0时,它需要几秒钟的时间才能再次调整大小。我想可能是它必须计算所有其他的scrollTop值,然后才能得到一个使标题再次变大的值。我该如何改进代码,使其能够毫不延迟地工作?
如@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());
});
工作演示
相关文章:
- 为什么我的上下文选择器和.buttonset()在ie中花费了这么长时间
- 谷歌地图需要很长时间才能在ie11中渲染
- 有没有一种方法可以检查javascript以毫秒为单位执行一个函数需要多长时间
- 我一直收到的控制台警告是什么?推迟长时间运行的计时器任务以提高滚动的流畅性
- 为什么这个代码不起作用?我花了很长时间试图弄清楚这一点
- 如何在长时间执行JavaScript期间显示微调器
- 长时间轮询:每个浏览器中的通知
- 完整日历:如何支持一次点击和不长时间点击
- 如何使用 javascript 停止对 asp.net 进行正在进行的回发(长时间运行的执行)
- 为什么这个 AJAX 调用需要这么长时间
- 为什么这个正则表达式需要这么长时间才能执行
- 如何修复长时间运行的脚本
- Node.js中的垃圾收集作用域-变量将保持设置状态多长时间
- javascript秒表限制最长时间
- 长时间运行的脚本IE与Chrome/Firefox
- 有没有一种方法可以在长时间运行的JavaScript操作之前强制回流
- 我的无引用 JavaScript 对象存在在哪里以及存在多长时间
- 为什么chromecast在动画帧之间需要这么长时间
- 输入焦点关闭键盘,需要长时间触摸
- jQuery scrollTop检测需要很长时间