在身體上滾動切換CSS和類

Question

我想讓我的確定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>

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> 

復位