如何正確定位此背景圖像以獲得視差效果？

Question

所以我有這個圖像作爲「視差分割」div的背景，我希望保留在頁面上，但是我想讓圖像滾動比其他內容更慢以完成視差影響。我知道我的目標是錯誤的，但不知道如何解決。我唯一得到的是以非常不合理的方式上下移動整個div。任何意見如何解決這個問題？

這裏的Codepen：http://codepen.io/anon/pen/vxOYrQ

.section { 
    height: 300px; 
    background-color: blue; 
} 

.parallax-divider { 
    background: url('http://www.planwallpaper.com/static/images/Cool-Background-Wallpaper-Dekstop.jpg') top center no-repeat; 
    background-size: cover; 
    background-attachment: fixed; 
    height: 200px; 
} 

<div class="section"></div> 

<div class="parallax-divider" id="parlx"> 
    <div class="wrapper"> 
    <div class="parallax-divider__image"> 
     <h2>lorem ipsum</h2> 
    </div> 
    </div> 
</div> 

<div class="section"></div> 

function parallax() { 
    var parlx = document.getElementById('parlx'); 
    parlx.style.position = "relative"; 
    parlx.style.top = -(window.pageYOffset/8) + 'px'; 
} 
window.addEventListener("scroll", parallax, false) 

Answer 1

使用transform: translateY()而不是top屬性。還將視差元素設置爲position: absolute，，並且它不會伸展。像這樣：

translate('+ (-(window.pageYOffset/8)) + 'px';