id="scroll_1"、"scroll_2"、"scroll_3" などの div がいくつかあります。これらの div のいずれかがウィンドウの中央にある場合、jQuery ハイライトを使用したり、背景色を変更したりします。ウィンドウの中央にあるdiv。現在、画面の中央にあると背景色が変更されますが、中央になくなると元の背景色に戻すのに問題があります (つまり、ユーザーが別の scroll_x id まで上下にスクロールした場合)。
私が持っている唯一の関連するcssコードを編集します:
[id^=scroll_]{
background-color:white;
}
助けてくれてありがとう!
<script>
$(document).ready(function() {
var window_height = $(window).height();
var obj_height = $('#scroll_1').height(); //height of object we are scrolling past
var top = $('#replyer').offset().top + (obj_height /2); //position on screen to start highlighting #scroll_x
$(window).scroll(function() {
var scrollMiddle = $(window).scrollTop() + ((window_height/2) - (obj_height /2));
if (scrollMiddle >= top) {
var scrollPosition = $(document).scrollTop()+ ((window_height/2) - (obj_height /2)),
currentPosition = 0;
$('div[id^="scroll_"]').each(function() {//iterate over #scroll_x and only change background until another #scroll_x is in the middle of the screen
currentPosition = $(this).offset().top;
if (currentPosition >= scrollPosition) {
$(this).prev(function(){
$(this).css('background-color',"#aaa"); //change previous #scroll_x back to original background color - Not Working Currently
});
return false; // break the loop
}
$(this).css('background-color',"#ccc"); //currently changes background of #scroll_x once in middle of screen but stays highlighted when scrolling up/down to previous/next iteration of #scroll_x
});
}
});
});
</script>
HTML:
<div id="replyer">
Top line before repeating divs
</div>
<div id="scroll_1">
First object to scroll over.
</div>
<div id="scroll_2">
Want to highlight div currently in the middle of screen
</div>
<div id="scroll_3">
Only div in middle of screen should be highlighted (background change)
</div>