Usando jQuery para resaltar div único cuando está en el centro de la ventana

Tengo varios divs con id="scroll_1", "scroll_2", "scroll_3", etc... Cuando cualquiera de estos divs está en el centro de la ventana, quiero usar el resaltado de jQuery y/o cambiar el color de fondo de cualquiera que sea el div que esté en el centro de la ventana. Actualmente, el color de fondo cambia una vez que está en el centro de la pantalla, pero tengo problemas para volver a cambiarlo al color de fondo original una vez que ya no está en el centro (es decir, el usuario se ha desplazado hacia abajo/hacia arriba a otro ID de scroll_x.

Editar el único código css relevante que tengo es:

[id^=scroll_]{
background-color:white;
}

Gracias por la ayuda!

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

preguntado el 12 de junio de 12 a las 09:06

Publique el css para que podamos probar esto rápidamente. -

2 Respuestas

No estoy seguro de si es exactamente lo que busca, pero aquí hay una demostración que cambiará el objeto que se superpone en el medio del navegador a verde.

Violín: http://jsfiddle.net/j2ULW/1/

Fuente completa:

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

Respondido el 12 de junio de 12 a las 11:06

+1 Este planteamiento de « SO Publicar también muestra un evento de cambio de tamaño agregado. - arttronics

De forma predeterminada, su contenedor div debe tener estas propiedades css:

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

Para bloquear el contenedor con un tamaño de 470 * 180 px, agregue esto:

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

Después, al hacer clic, elimina la clase .container-closed para eliminar el desbordamiento:

El código jquery:

// by default we block the size with JS
$("#div").addClass("container-closed");
// click event
$("#trigger").click( function() {
      $("#div").toggleClass("container-closed");
});

Respondido 22 Jul 12, 14:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.