时间戳

首页 > 解决方案 > 在用户仅在 200px 和 300px 之间滚动时添加一个类

javascript - 在用户仅在 200px 和 300px 之间滚动时添加一个类

问题描述

当用户向下滚动页面时，我正在尝试向 div 添加一个类。当他们向下滚动200px页面时，我希望添加一个类，然后一旦用户向下滚动，300px我希望删除该类。同样，当用户向上滚动页面并300px从顶部滚动时，我希望添加该类，直到它到达200px然后删除该类。

我尝试了很多变化，但我认为我的方法都是错误的。这是到目前为止我已经走了多远的 jsfiddle - http://jsfiddle.net/v8my3sr1/

$(window).on('scroll',function() { 
  var scroll = $(window).scrollTop();
  if (scroll >= 200) {
    $(".trigger").addClass("wow");
  } else {
    $(".trigger").removeClass("wow");
  }
});

标签： javascriptjqueryhtmlcss

解决方案

你的条件不正确。您应该检查该scroll值是否介于200和300

$(window).on('scroll',function() { 
  var scroll = $(window).scrollTop();
  if (300 >= scroll && scroll >= 200) {
    $(".trigger").addClass("wow");
  } else {
    $(".trigger").removeClass("wow");
  }
});


$(window).on('scroll',function() { 
  var scroll = $(window).scrollTop();
  if (300 >= scroll && scroll >= 200) {
    $(".trigger").addClass("wow");
  } else {
    $(".trigger").removeClass("wow");
  }
});
.container {
  height: 2000px;
}
.trigger {
  margin-top: 300px;
  height: 400px;
}
.wow {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="trigger">
    <h1>Trigger container</h1>
  </div>
</div>

您也可以.toggleClass()用来简化代码

$(window).on('scroll',function() { 
  var scroll = $(window).scrollTop();
  $(".trigger").toggleClass("wow", 300 >= scroll && scroll >= 200);
});

推荐阅读