Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Cambiar color de fondo del menú dependiendo del div que este viendo

Estas en el tema de Cambiar color de fondo del menú dependiendo del div que este viendo en el foro de Jquery en Foros del Web. Buenas a tod@s!! Estoy haciendo una web para un amigo ( http://soledadjoulia.com.ar/gus/comunica ). Todo el contenido está en una única página, todo de corrido, y ...
  #1 (permalink)  
Antiguo 23/02/2014, 17:52
Avatar de 2D6
2D6
 
Fecha de Ingreso: enero-2006
Ubicación: Posadas, Misiones
Mensajes: 60
Antigüedad: 18 años, 10 meses
Puntos: 4
Cambiar color de fondo del menú dependiendo del div que este viendo

Buenas a tod@s!!

Estoy haciendo una web para un amigo (http://soledadjoulia.com.ar/gus/comunica). Todo el contenido está en una única página, todo de corrido, y la idea es que cada sección tenga un color asociado y que el menú cambie a ese color.
Con los links de las secciones no hay drama, al hacer click cambia el color de fondo (usando jquery), el problema es que si el usuario, en vez de hacer click en la sección, scrolea para llegar al contenido entonces no cambia de color.

Cómo podría hacer? Probé con hover sobre el los divs pero no funcionar.

Gracias!
  #2 (permalink)  
Antiguo 23/02/2014, 22:28
Avatar de 2D6
2D6
 
Fecha de Ingreso: enero-2006
Ubicación: Posadas, Misiones
Mensajes: 60
Antigüedad: 18 años, 10 meses
Puntos: 4
Respuesta: Cambiar color de fondo del menú dependiendo del div que este viendo

Bueno, encontré un script que adapte para mis necesidades, lo paso por si a alguno le sirve.
La idea es que Y toma el valor de la parte superior que se está viendo en todo momento y luego lo compara con el valor que tiene cada div. Con un if compara si el valor de Y es igual o mayor al valor de cada div, si es así significa que el usuario está visualizando ese div en cuestión y ahí hace el cambio de background-color.

Los -200 los agregué yo (no estaban en el script original) para que el cambio de color sea "llegando" a la sección y no en el momento exacto.

Código Javascript:
Ver original
  1. $(document).ready(function () {
  2.     $(window).scroll(function () {
  3.         var y = $(this).scrollTop();
  4.         var quienes = $('#quienes_somos').offset().top;
  5.     var nuestros = $('#nuestros_trabajos').offset().top;
  6.     var contacto = $('#contacto').offset().top;
  7.        
  8.     var quienes = quienes - 200;
  9.     var nuestros = nuestros - 200;
  10.     var contacto = contacto - 200;
  11.  
  12.         if (y >= quienes) {
  13.             $('header').css('background-color','rgba(39, 174, 96,0.8');
  14.         }
  15.        
  16.         if (y >= nuestros) {
  17.             $('header').css('background-color','rgba(243, 156, 18,0.8');
  18.         }
  19.        
  20.         if (y >= contacto) {
  21.             $('header').css('background-color','rgba(192, 57, 43,0.8');
  22.         }
  23.     });
  24. });

Etiquetas: color, dependiendo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:45.