以下に示すように、2 つのコンテナー div があります (背景とコンテンツ領域)。背景の位置は固定されており、コンテンツ領域にカーソルを合わせてスクロールすると、ホバー時にさまざまな時代に変化します。
私の問題ですが、ウィンドウのスクロールバーで背景を変更したいのですが(コンテンツ領域にカーソルを合わせたときに変更されるのと同じように)、どうすればよいかわかりませんか?
<div class="background">
<div class="era t_1500 bg active"></div>
<div class="era t_1600 bg"></div>
<div class="era t_1700 bg"></div>
<div class="era t_1800 bg"></div>
</div>
<div class="content-area">
<div id="t_1500">
//some content
</div>
<div id="t_1600">
//some content
</div>
<div id="t_1700">
//some content
</div>
<div id="t_1800">
//some content
</div>
</div>
$('#t_1500, #t_1600, #t_1700, #t_1800').hover(
function(){
var thatId = $(this).attr('id');
var thisBg = '.' + thatId;
if(!$(this).hasClass('active') {
$('.background .era').hide();
$(thisBg).show();
}
}
);