jquery - jquery当id是scrolltop时改变css

Question

我需要当一个'id'在Top中花费时，按钮会改变css

然后得到这样的东西：

*css

.active{
background:red;
}

.inactive{
background:#FFF;
}

*纽扣：

<div id="button1" class="inactive">Box 1</div>
<div id="button2" class="inactive">Box 2</div>

*身份证：

<span id="start1"></span>
Content Box 1
bla bla bla
<span id="end1"></span>

<span id="start2"></span>
Content Box 2
bla bla bla
<span id="end2"></span>

*脚本

when '#start1' is scrolltop,
('#button1').removeClass('inactive').addClass('active');
('#button2').removeClass('active').addClass('inactive');

when '#end1' is scrolltop, **in case of passing the top with the scroll upwards
('#button1').removeClass('inactive').addClass('active');
('#button2').removeClass('active').addClass('inactive'); 

when '#start2' is scrolltop,
('#button2').removeClass('inactive').addClass('active');
('#button1').removeClass('active').addClass('inactive');

when '#end2' is scrolltop, **in case of passing the top with the scroll upwards
('#button2').removeClass('inactive').addClass('active');
('#button1').removeClass('active').addClass('inactive'); 

请，建议。