要素を視差スクロールで固定したままにする方法を教えてください。

Question

以下の要約されたコデペン。私は戻ってからthis BBC articleの後にページをモデル化しようとしていますが、私はスクロールオフに基づいて固定位置に行くために私のイメージを取得するように見えません。

私は要素が位置することを得ることができればと考えている：私は私のyPositionのvarはいえ、私のスクロール機能を通過するように見えることはできません固定、私はJS

で画像を入れ替えることができます http://codepen.io/spkellydev/pen/aWzwdQ?editors=1111

ここではプロジェクトの完全なコードペーンがありますが、私はこの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

は、あなたがポジションを使用してみましたが、私のJSですか？

これはあなたの質問に直接答えませんが、あなたが探しているものを正確に生成します。 Sticky is not fully supported though。

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

これはすべてあなたが必要とするもので、親要素が許可する画面上の場所に保持されます。親要素の外には移動しません。

Your CodePen edited（私はあなたのCSSのいくつかを台無しにしている場合があります）