check out this demo
this snippet allows you to capture the beginning and end of scrolling events (thanks to jquery-throttle-debounce)
when the scroll exceeds 100px, the background color changes to blue while scrolling.
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;
}