我應該如何強制元素在視差滾動中保持固定？

Question

以下是簡略的Codepen。 我試圖從此BBC文章之后開始對頁面進行建模，但是我似乎無法基於滾動來使圖像固定在某個位置。

我在想，如果我可以將元素定位：固定，那么我可以用js換出圖像

我似乎無法讓我的yPosition變量通過http://codepen.io/spkellydev/pen/aWzwdQ?editors=1111通過滾動功能傳遞

這是項目的完整代碼庫，我似乎無法讓這個js為我工作。 有小費嗎？

這是我的JS

var yPosition = document.getElementById("scrollLock").offsetTop;



window.onscroll = function(){ // scrolling fires this function      
console.log(yPosition);
    var myElement = document.getElementById("scrollLock"); // for cleaner code

    // compare original y position of element to y position of page
  console.log('it is scrolled at');
    if( yPosition < window.pageYOffset ){ 

        // snap element to the top by changing css values of element
        myElement.addClass('addScrollLockImg'); 
        console.log('it worked');
     } else {          

        // re-position to original flow of content
       myElement.removeClass('addScrollLockImg');
       console.log('it passed');
    }               
}      

Answer 1

您是否嘗試過使用位置：粘性？

這不會直接回答您的問題，但會准確地產生您要查找的內容。 粘滯不完全支持 。

position: -webkit-sticky
position: sticky
top: 20px /* Distance from top of screen when 'stuck' */

這就是您所需要的，並將其保留在父元素允許的屏幕上。 因為它不會移動到其父元素之外。

您的CodePen已編輯 （我可能弄亂了您的一些CSS）