html - 如何修复此元素以使其在滚动时停留在页面顶部？

Question

我正在为我的 UI 设计类(class)做一个元素，需要帮助将元素固定到滚动页面的顶部。

这是我目前拥有的:http://ieatthings.com/opinio/query.html

当您滚动时，搜索栏应该向上移动，越过导航栏，并恰到好处地让用户在页面中间进行搜索。但问题是搜索栏一直在上升!

我使用了本教程中的 Javascript:Fix object to top of browser window when scrolling .我已经尝试了各种可能性和组合，但不幸的是没有让这个该死的东西起作用。

有什么建议吗？

Answer 1

您必须使用 Javascript 来测试您的元素(“myElement”)在页面上的位置与页面滚动距离的对比。如果页面已经向上滚动到您的元素之外，那么您可以更改元素的 css 以将其对齐到页面顶部。注意:移动浏览器不喜欢“position: fixed;”样式属性。

为您的元素指定“myElement”的 ID，并将其插入到您的标签中。

<script type="text/javascript"> 

var yPosition; // save original y position of element here

window.onload = function(){ // once entire page is loaded this function is fired
    // save original y position of element before it is scrolled
    yPosition = document.getElementById("myElement").offsetTop;
}

window.onscroll = function(){ // scrolling fires this function      

    var myElement = document.getElementById("myElement"); // for cleaner code

    // compare original y position of element to y position of page
    if( yPosition <= window.pageYOffset ){ 

        // snap element to the top by changing css values of element
        myElement.style.position = "fixed";
        myElement.style.top = "0px"; 

    }else{          

        // re-position to original flow of content
        myElement.style.position = "relative";
        myElement.style.top = ""; // set to default         
    }               
}      
</script>

希望这对您有所帮助!