Question

以下简要的Codepen。我试图在this BBC article之后对页面进行建模，但是我似乎无法根据滚动来获取固定位置。

我在想如果我能把元素放到位置：固定然后我可以用js替换图像

我似乎无法让我的yPosition var通过我的滚动功能 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：sticky？

这并不直接回答您的问题，但会产生您正在寻找的内容。 Sticky is not fully supported though

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

这就是您所需要的一切，它将保留在父元素允许的屏幕上。因为它不会移动到它的父元素之外。

Your CodePen edited（我可能搞砸了你的一些CSS）

我应该如何通过视差滚动强制元素保持固定？

1 个答案: