look at this fiddle
in this code you can intercept start and end scroll (using jquery-throttle-debounce)
if the scrool is higher than 100px background becomes blue during scroll.
jquery
$(window).scroll($.debounce( 250, true, function(){
$('#scrollMsg').html('SCROLLING');
var height = $(window).scrollTop();
if(height > 100) {
$('p').addClass('linear');
}
} ) );
$(window).scroll($.debounce( 250, function(){
$('#scrollMsg').html('FINISH');
$('p').removeClass('linear');
} ) );
css
#scrollMsg{
position:fixed;
color: red;
font-size: 20px;
background-color: white!important;
padding:20px;
}
p{
background: rgba(0,0,0,0.4);
background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.4)), color-stop(100%, rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
.linear{
background-color:blue;
}