在身体滚动上切换css和类

Question

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

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

＆＃13;

＆＃13;

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

});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

$(function(){
$(window).scroll(function(){
    $('.ok').addClass('nah');
    var stopListener = $(window).mouseup(function(){
        
        $('.ok').removeClass('nah');
        stopListner();
    });
} );
});

.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 3

以下是平滑增加填充并在滚动顶部重置的代码

 var origional_padding = parseFloat(jQuery('.ok').css('padding')); 
 var currentPadding = origional_padding; 
jQuery(window).scroll(function(){

     jQuery('.ok').css('padding', ++currentPadding + 'px');
   clearTimeout(jQuery.data( this, "scrollCheck" ) );
                jQuery.data( this, "scrollCheck", setTimeout(function() {
                    jQuery('.ok').css('padding', origional_padding);
                }, 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;
}

.ok{
    /* other CSS declarations ...*/
    -webkit-transition: padding .5s linear;
       -moz-transition: padding .5s linear;
        -ms-transition: padding .5s linear;
         -o-transition: padding .5s linear;
            transition: padding .5s linear;
}

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