Espero te sirva el siguiente ejemplo:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Poscion Scroll</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<div class="posicion"><h1>Posicion: <small id="posicion"></small></h1></div>
<div id="div1">
<h1 id="h1-1">Div 1</h1>
</div>
<div id="div2">
<h1 id="h1-2">Div 2</h1>
</div>
<div id="div3">
<h1 id="h1-3">Div 3</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/scroll.js"></script>
</body>
</html>
scroll.js jquery
$(document).ready(function() {
var scroll = $(window).scrollTop();
$('#posicion').text(scroll);
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
$('#posicion').text(scroll);
/*Cambia el color del div cuando es distinto a 0*/
if(scroll!=0){
$('#div1').css({
background: '#fff'
});
}else{
$('#div1').css({
background: '#066DFA'
});
}
});
});
estilo.css
html,body{
margin: 0;
width: 100%;
height: 100%;
}
div{
position: static;
width: 100%;
height: 100%;
}
h1{
margin:0;
}
#div1{
background-color: #066DFA;
}
#div2{
background-color: #FBF806;
}
#div3{
background-color: #FE2704;
}
.posicion{
position: fixed;
width: 100%;
height: 5%;
background-color: #FB0606;
text-align: center;
color: #fff;
}
Es una manera sencilla de hacer el cambio de color del div