-1
3つのdivの#div、#position2のそれぞれについて、CSS#プロパティの値をdiv#consolaの中にテキストとして挿入する必要があります、#position3 - スクロールバーが進んだときの値の変化として、それぞれ-p1color、p2color、p3colorクラスになります。あなたが使用することができますjQueryから与えられたdivの中にテキストとしてCSSプロパティの値を挿入します
$(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クラスに同時にそれを使用する場合、それは動作しません。あなたは私を助けることができます? –