SS:
私は、視差効果を作り出す働いています。私は画像と背景色を持っています。スクロールに基づいて、この背景色が0にトップとスクロールバックを移動する必要があり、それは、その実際の位置に移動する必要があります。
現時点では、私が先頭に直接この色の移動をスクロールし、スクロール位置の移動が0に戻りとき、それがダウンして来ないとき。
function parallax() {
var image = document.getElementById('image');
image.style.top = -(window.pageYOffset / 0.5) + 'px';
}
window.addEventListener("scroll", parallax, false)
body {
background: cyan;
}
#image {
background: green;
width: 100px;
height: 100px;
top: 310px;
right: -30px;
position: absolute;
}
.frst {
color: white;
position: relative;
width: 100px;
height: 100px;
}
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>
<div class='div1' style=" position:relative;width: 50%; height: 350px; background-color: red; top: 20%;">
<div id='image'></div>
</div>
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>
Eliyaのコーエン:
それはあなたが削除しなかったためだtop
、それがゼロに戻ったときのルールを:
if (image.style.top === "0px") {
image.style.top = "";
}
このデモでは動作しますが、それは単に「包帯」です。私の代わりに初期のトップを使用してお勧めします。
function parallax() {
var image = document.getElementById('image');
image.style.top = -(window.pageYOffset / 0.5) + 'px';
}
window.addEventListener("scroll", parallax, false)
body {
background: cyan;
}
#image {
background: green;
width: 100px;
height: 100px;
top: 0;
right: -30px;
position: absolute;
transform: translateY(310px);
}
.frst {
color: white;
position: relative;
width: 100px;
height: 100px;
}
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>
<div class='div1' style=" position:relative;width: 50%; height: 350px; background-color: red; top: 20%;">
<div id='image'></div>
</div>
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>
</div>