Umschalten css und Klasse auf Körper scroll

Question

Ich versuche, meine OK div zu haben, um seine Polsterung während Scroll zu erhöhen, aber wenn ich mit dem Scrollen aufhöre, wird es auf seine ursprüngliche Polsterung zurück. Ich kann die Schriftrolle jedoch nicht zur Arbeit bringen.

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

prüfen unter Schnipsel, die Ihnen helfen.

$(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

Hier ist der Code padding zu erhöhen glatt und Reset auf scroll oben

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>