2

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>
4

2 に答える 2

4

それがあなたの求めているものかどうかはわかりませんが、ブラウザーの中央に重なっているオブジェクトを緑色に変更するデモを次に示します。

フィドル: http://jsfiddle.net/j2ULW/1/

完全なソース:

<html>
<head>
  <title>Scroll test</title>
</head>
<style type="text/css">
  body {
    background: #000;
  }
  [id^=scroll_]{
    background-color:#aaa;
    height: 600px;
  }
  #replyer {
    height: 400px;
    background: white;
  }
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<body>
  <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>
<script>
$(document).ready(function() {      
  var window_height = $(window).height();
  $(window).scroll(function() {
    var scrollMiddle = $(window).scrollTop() + (window_height/2);
    $('div[id^="scroll_"]').each(function() {
      elTop = $(this).offset().top;
      elBtm = elTop + $(this).height();
      if (elTop < scrollMiddle && elBtm > scrollMiddle) {
        $(this).css('background-color',"#00ff00");
      } else {
        $(this).css('background-color',"#aaa");
      }
    });
  });
});
</script>
</body>
</html>
于 2012-06-12T10:00:29.957 に答える
1

デフォルトでは、コンテナ div には次の css プロパティが必要です。

div.container { overflow:auto; height:auto; }

470*180px サイズのコンテナーをブロックするには、次を追加します。

div.container-closed { overflow:hidden; width:470px; height:180px; }

その後、クリックすると、オーバーフローを削除するためにクラス .container-closed を削除します。

jquery コード:

// by default we block the size with JS
$("#div").addClass("container-closed");
// click event
$("#trigger").click( function() {
      $("#div").toggleClass("container-closed");
});
于 2012-07-22T09:06:14.597 に答える