jquery窗口滚动触发css

JQuery是一种流行的JavaScript库，让网页制作变得更加简单。其中一个功能是让窗口滚动时触发CSS动画。为了实现这个效果，我们需要先定义CSS动画，然后使用JQuery来检测窗口位置，并在到达指定点时触发动画。

/* 定义CSS动画 */
.animate {
  opacity: 0;
  transform: translateY(50px);
  transition: all .5s ease-in-out;
}

/* 滚动触发 */
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  var windowHeight = $(window).height();
  $('.animate').each(function() {
    var position = $(this).offset().top;
    if (position 

上面的代码使用了.scroll()方法在窗口滚动时触发函数。它首先获取滚动位置和窗口高度，然后遍历每个拥有.animate类的元素，并检查它们是否出现在可见窗口内。如果是，则添加.active类，触发CSS动画。

我们还需要在HTML中使用.animate类指定需要触发动画的元素：

<div class="animate">
  <h2>Header</h2>
  <p>Some content</p>
</div>

以上是实现滚动触发CSS动画的基本方法，可以根据自己的需求定制动画和触发条件。使用JQuery让任何网站都可以增加动态效果，提升用户体验。