jquery:改变滚动的CSS

Question

我需要一个 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

这可能是一个非常简单的片段。有人可以帮助我吗？那太好了。非常感谢!最好的问候，皮埃尔

Answer 1

您可以使用 $(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>