javascript - 在 body scroll 上切换 css 和 class

Question

我试图让我的 ok div 在滚动期间增加它的填充，但是当我停止滚动时，它恢复到原来的填充。但是我无法让滚动条工作。

fid: https://jsfiddle.net/f8an2fvd/

$(function(){
$('body').on('scroll', function (e){
$('.ok').toggleClass('nah');
});

});

.ok{
  background:black;
  width:100vw;
  height:200vh;
  position:relative;
  padding:50px;
}
.inner{
  width:100%;
  height:100%;
  background:blue;
}
.nah{
  padding:100px !important;
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok">
  <div class="inner"></div>
</div>

Answer 1

检查下面的代码片段，这对您有帮助。

$(function() {
  $(window).scroll(function() {
    $('.ok').addClass('nah');
    clearTimeout($.data(this, "scrollCheck"));
    $.data(this, "scrollCheck", setTimeout(function() {
      $('.ok').removeClass('nah');
    }, 250));
  });
});

.ok {
  background: black;
  width: 100vw;
  height: 200vh;
  position: relative;
  padding: 50px;
}

.inner {
  width: 100%;
  height: 100%;
  background: blue;
}

.nah {
  padding: 100px !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok">
  <div class="inner"></div>
</div>