我试图在 div 上创建视差效果,但当我开始滚动时它会跳到页面顶部。顶部值立即变为0
HTML
<div class="container">
<div class="top">
</div>
<div class="middle">
</div>
<div class="slider" id="rowSlider">
</div>
<div class="content">
</div>
</div>
JS
function parallax(){
var prlx_lyr_1 = document.getElementById('rowSlider');
prlx_lyr_1.style.top = -(window.pageYOffset / 2)+'px';
}
window.addEventListener("scroll", parallax, false);
CSS
.container{width:100%;}
.top{position:fixed; top:0; left:0; width:100%; z-index:1; background:#000; height:50px;}
.middle{width:100%; height:150px; background:red; width:100%; position:relative; z-index:2; margin-top:50px;}
.slider{width:100%; position:fixed; height:200px; background:orange; left:0; top:200px; z-index:3;}
.content{width:100%; position:relative; z-index:4; height:200px; background:blue; margin-top:400px;}
最佳答案
感谢丹恩:
.slider 的初始位置为 200px。解决办法是:
prlx_lyr_1.style.top = (200-(window.pageYOffset / 2))+'px';
关于javascript - 视差div跳转到页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34608992/