2

Hola necesito obtener algún medio para insertar el valor de la propiedad css "color" como texto dentro del div#consola para cada uno de los 3 div:

  • #position
  • #position2
  • #position3

en las clases p1color, p2color, p3color respectivamente a medida que el valor va cambiando cuando se avanza en la barra de scroll.

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    if ( scroll > 0 && scroll < 1000) {
		$('.position').css({
'color':'rgba(0,255,65,1.00))',
'background':'rgba(0,40,90,1.00)'
			})
		$('.position2').css({
'color':'rgba(255,248,0,1.00)',
			})
		$('.position3').css({
'color':'rgba(255,0,215,1.00)',
			})
		}
   if ( scroll > 1000 && scroll < 2000) {
		$('.position').css({
'color':'rgba(255,242,0,1.00)',
'background':'rgba(255,0,144,1.00)'
			})
		$('.position2').css({
'color':'rgba(0,100,206,1.00)',
			})
		$('.position3').css({
'color':'rgba(0,255,7,1.00)',
			})
		}
   if ( scroll > 2000 && scroll < 3000) {
		$('.position').css({
'color':'rgba(0,94,255,1.00)',
'background':'rgba(255,0,226,1.00)'
			})
		$('.position2').css({
'color':'rgba(155,0,255,1.00)',
			})
		$('.position3').css({
'color':'rgba(224,224,224,1.00)',
			})
		}
	
    if ( scroll > 3000 && scroll < 4000) {
		$('.position').css({
'color':'rgba(255,2,6,1.00)',
'background':'rgba(255,2,6,1.00)'
			})
		$('.position2').css({
'color':'rgba(69,66,179,1.00)',
			})
		$('.position3').css({
'color':'rgba(124,141,245,1.0)',
			})
		}
    if ( scroll > 4000 && scroll < 5000) {
		$('.position').css({
'color':'rgba(0,94,255,1.00)',
'background':'rgba(255,0,226,1.00)'
			})
		$('.position2').css({
'color':'rgba(224,224,224,1.00)',
			})
		$('.position3').css({
'color':'rgba(155,0,255,1.00)',
			})
		}
	if ( scroll > 5000 && scroll < 6000) {
		$('.position').css({
'color':'rgba(211,104,0,1.0)',
'background':'rgba(255,238,0,1.00)',
'text-shadow':'none'
			})
		$('.position2').css({
'color':'rgba(176,50,0,1.0)',
			})
		$('.position3').css({
'color':'rgba(100,16,5,1.00)',
			})
		}
	if ( scroll > 5000 && scroll < 6000) {
		$('.position').css({
'color':'rgba(196,173,217,1.00)',
'background':'rgba(243,255,217,1.00)',
			})
		$('.position2').css({
'color':'rgba(136,168,191,1.0)',
			})
		$('.position3').css({
'color':'rgba(68,47,168,1.0)',
			})
		}
		});
body{text-align:center;height:10000px;}
.position{
color:blue;

 display:inline;
  margin-top:5px;
  position:fixed;
}
.position2{
color:grey;

  display:inline;
   margin-top:25px;
  position:fixed;
}
.position3{
color:green;

  display:inline;
   margin-top:45px;
  position:fixed;
}
#consola{
   background:grey;
  display:inline;
   margin-top:65px;
  position:fixed;
  width:300px;
  height:100px;
  margin-left:-150px;
}
.p1color{
 background:red;
}
.p2color{
 background:green;
}
.p3color{
 background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position">
  AAAA
  </div>
<div class="position2">
  BBBBB
  </div>
<div class="position3">
  CCCC
  </div>

<div id="consola">
  <div class="p1color">
    B
    </div>
  <div class="p2color">
    C
    </div>
  <div class="p3color">
    D
    </div>
  </div>

1 respuesta 1

1

Si he entendido bien la pregunta, lo que quieres es que no sólo se cambie el color del texto (cosa que ya tienes hecha), sino que también se muestre el valor del nuevo color en el div inferior (por hacer).

Si eso es lo que quieres, no tiene ningún misterio: Sólo tendrías que leer el atributo color usando el método .css(atributo) y asignárselo al div correspondiente usando .text(valor). El problema de esta solución es que jQuery interpreta el valor de la propiedad y te muestra el valor equivalente (en rgb) que no es exactamente lo que tenías escrito en tu parte del código (en rgba).

Algo así:

$(".p1color").text($(".position").css("color"));
$(".p2color").text($(".position2").css("color"));
$(".p3color").text($(".position3").css("color"));

Sólo tendrías que añadir ese texto al final de tu función y ya estaría hecho:

$(window).scroll(function (event) {
  var scroll = $(window).scrollTop();
  if ( scroll > 0 && scroll < 1000) {
    $('.position').css({
      'color':'rgba(0,255,65,1.00))',
      'background':'rgba(0,40,90,1.00)'
    })
    $('.position2').css({
      'color':'rgba(255,248,0,1.00)',
    })
    $('.position3').css({
      'color':'rgba(255,0,215,1.00)',
    })
  }
  if ( scroll > 1000 && scroll < 2000) {
    $('.position').css({
      'color':'rgba(255,242,0,1.00)',
      'background':'rgba(255,0,144,1.00)'
    })
    $('.position2').css({
      'color':'rgba(0,100,206,1.00)',
    })
    $('.position3').css({
      'color':'rgba(0,255,7,1.00)',
    })
  }
  if ( scroll > 2000 && scroll < 3000) {
    $('.position').css({
      'color':'rgba(0,94,255,1.00)',
      'background':'rgba(255,0,226,1.00)'
    })
    $('.position2').css({
      'color':'rgba(155,0,255,1.00)',
    })
    $('.position3').css({
      'color':'rgba(224,224,224,1.00)',
    })
  }

  if ( scroll > 3000 && scroll < 4000) {
    $('.position').css({
      'color':'rgba(255,2,6,1.00)',
      'background':'rgba(255,2,6,1.00)'
    })
    $('.position2').css({
      'color':'rgba(69,66,179,1.00)',
    })
    $('.position3').css({
      'color':'rgba(124,141,245,1.0)',
    })
  }
  if ( scroll > 4000 && scroll < 5000) {
    $('.position').css({
      'color':'rgba(0,94,255,1.00)',
      'background':'rgba(255,0,226,1.00)'
    })
    $('.position2').css({
      'color':'rgba(224,224,224,1.00)',
    })
    $('.position3').css({
      'color':'rgba(155,0,255,1.00)',
    })
  }
  if ( scroll > 5000 && scroll < 6000) {
    $('.position').css({
      'color':'rgba(211,104,0,1.0)',
      'background':'rgba(255,238,0,1.00)',
      'text-shadow':'none'
    })
    $('.position2').css({
      'color':'rgba(176,50,0,1.0)',
    })
    $('.position3').css({
      'color':'rgba(100,16,5,1.00)',
    })
  }
  if ( scroll > 5000 && scroll < 6000) {
    $('.position').css({
      'color':'rgba(196,173,217,1.00)',
      'background':'rgba(243,255,217,1.00)',
    })
    $('.position2').css({
      'color':'rgba(136,168,191,1.0)',
    })
    $('.position3').css({
      'color':'rgba(68,47,168,1.0)',
    })
  }

  $(".p1color").text($(".position").css("color"));
  $(".p2color").text($(".position2").css("color"));
  $(".p3color").text($(".position3").css("color"));
});
body{
  text-align:center;
  height:10000px;
}
.position{
  color:blue;
  display:inline;
  margin-top:5px;
  position:fixed;
}
.position2{
  color:grey;
  display:inline;
  margin-top:25px;
  position:fixed;
}
.position3{
  color:green;
  display:inline;
  margin-top:45px;
  position:fixed;
}
#consola{
  background:grey;
  display:inline;
  margin-top:65px;
  position:fixed;
  width:300px;
  height:100px;
  margin-left:-150px;
}
.p1color{
  background:red;
}
.p2color{
  background:green;
}
.p3color{
  background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position">
  AAAA
</div>
<div class="position2">
  BBBBB
</div>
<div class="position3">
  CCCC
</div>

<div id="consola">
  <div class="p1color">
    B
  </div>
  <div class="p2color">
    C
  </div>
  <div class="p3color">
    D
  </div>
</div>

1
  • muchas gracias :D
    – Ivan Soler
    el 16 abr. 2016 a las 14:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.