如何修复此元素以在滚动时粘贴在页面顶部？答案

【问题标题】：How can I fix this element to stick at the top of the page on scroll?如何修复此元素以在滚动时粘贴在页面顶部？
【发布时间】：2013-04-30 21:55:01
【问题描述】：

我正在为我的 UI 设计课程做一个项目，需要帮助将一个元素固定到滚动页面的顶部。

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

当您滚动时，搜索栏应该向上移动，越过导航栏，并且非常适合让用户在页面中间进行搜索。但问题是搜索栏一直在上升！

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

有什么建议吗？

【问题讨论】：

标签： html css search scroll

【解决方案1】：

您必须使用 Javascript 来测试您的元素（“myElement”）在页面上的位置，并与页面滚动的距离进行比较。如果页面已向上滚动到您的元素之外，那么您更改元素的 css 以将其捕捉到页面顶部。注意：移动浏览器不喜欢“位置：固定；”样式属性。

为您的元素提供“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>

希望这会有所帮助！

【讨论】：

元素距离顶部大约 340 像素。知道这些信息会有帮助吗？
你太棒了，非常感谢！！最后一个问题：当我向下滚动时，搜索栏向左移动。我尝试做 'myelement.style.text-align = "center" 但无济于事。有什么建议吗？
一旦你绝对定位了你的元素（固定），你将不得不使用“myElement.style.left = '200px';”或者使您的搜索框居中所需的像素数。如果您使用的是响应式布局，则必须使用百分比。
谢谢！它是如此接近，@ 987654321@。当我滚动时，元素确实居中，但是当您向上滚动时似乎会发生这个错误。它似乎在布局的一侧添加了相同的数量（在我的情况下约为窗口的 50%）。我尝试将其更改为正确的，但它做同样的事情。我将继续在这里闲逛，但如果您认为您可能有任何见解，请随时分享！像你这样的人恢复了我对互联网人性的信心。