如何在向下滚动时平滑地降低div的高度，并在向上滚动时以相同的速度增加它？
如何在向下滚动时平滑地降低div的高度，并在向上滚动时以相同的速度增加它？
提问于 2018-08-04 20:33:14
这是我到目前为止所拥有的。
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>CSS
div {
position:fixed;
top:10px;
left:10px;
width:200px;
height:400px;
background-color:red;
}JS
$(document).ready(function() {
var height = $("div").height();
$(document).scroll(function() {
var lastScrollTop = 0;
$(window).scroll(function(event) {
var st = $(this).scrollTop();
if(st > lastScrollTop) {
height = height - 1;
$("div").css({
'height': height
});
} else {
height = height + 1;
$("div").css({
'height': height
});
}
lastScrollTop = st;
});
});
});这是一个codepen。https://codepen.io/anon/pen/PBaVvB。
我不知道问题出在哪里。逻辑看起来很可靠！
但有时它的高度下降的速度比增长的速度快得多，反之亦然。有人能帮上忙吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-04 20:48:54
使用onscroll，onmousemove等事件对于平滑的移动来说可能有点危险，因为它们只在事件被触发时触发。这些是具有挑战性的，因为它们有时发射得很快，有时发射得很慢，但之后就不会继续发射了。
div {
position:fixed;
top:10px;
left:10px;
width:200px;
height:400px;
background-color:red;
}和
$(document).ready(function() {
var lastScrollTop = 0;
var height=oheight = $("div").height();
$(document).scroll(function() {
height=$(this).scrollTop()/($(document).height()-$(window).height())*oheight;
$("div").css({
'height': height
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51685602
复制相关文章
相似问题
腾讯云开发者
