我需要一个 jquery 代码片段,它可以在用户滚动页面时更改 css 值(从最小值到最大值 - 两者都可以声明)。根据滚动位置,div 的 CSS 值(例如高度)应“实时”更改。
假设 scolling 变成 0 到 max 之间的范围。 200 像素。 (当滚动超过 200 像素时,它不应再影响 CSS 值。)
CSS 值在 300px 到 600px 之间。
这是 jquery 例程应该做的:
Scroll=0px: CSS value=300px
Scroll=100px: CSS value=450px
Scroll=200px: CSS value=600px
这可能是一个非常简单的片段。有人可以帮助我吗?那太好了。非常感谢!最好的问候,皮埃尔
最佳答案
您可以使用 $(window).scroll(function()
触发滚动事件,然后获取所需 div 或任何需要的滚动量,在这个例子中我使用了 window
.然后查看滚动量 if(scroll >= minScroll && scroll < MaxScroll)
并执行所需的操作
$(window).scroll(function() {
var scroll = $(window).scrollTop();
console.log(scroll);
if(scroll >= 200 && scroll < 700){
$(".box").css("background-color", "blue");
}
else if(scroll >= 700 && scroll < 1300){
$(".box").css("background-color", "green");
}
else if(scroll >= 1300 && scroll < 2000){
$(".box").css("background-color", "purple");
}
else if(scroll >= 2000 && scroll < 3000){
$(".box").css("background-color", "orange");
}
});
.box{
background-color: orange;
height: 3000px;
width 100%;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
</div>
关于jquery:改变滚动的CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53502413/