Html 如何将此元素固定在滚动页面的顶部？

我正在为我的UI设计类做一个项目，需要帮助修复滚动页面顶部的元素

以下是我目前掌握的情况：

当你滚动时，搜索栏应该向上移动，越过导航栏，并很好地配合到位，让用户在页面中间搜索。但问题是搜索栏一直在上升

我使用了本教程中的Javascript:。我尝试过各种可能性和组合，但不幸的是，这该死的东西没有发挥作用

---

有什么建议吗？

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

将元素的id设置为“myElement”，并将其插入到标记中

<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>

变量yPosition；//在此处保存元素的原始y位置
window.onload=function（）{//加载整个页面后，将启动此函数
//在滚动元素之前保存元素的原始y位置
yPosition=document.getElementById（“myElement”）.offsetTop；
}
window.onscroll=function（）{//滚动启动此函数
var myElement=document.getElementById（“myElement”）；//用于更干净的代码
//将元素的原始y位置与页面的y位置进行比较
if（yPosition）元素距离顶部约340 px。知道这些信息会有帮助吗？你太棒了，非常感谢！！最后一个问题：当我向下滚动时，搜索栏移到了左侧。我尝试了“myelement.style.text-align=“center”，但没有用。有什么建议吗？一旦你完全定位了元素（已修复），则必须使用“myElement.style.left='200px'或者无论搜索框居中需要多少像素。如果您使用的是响应性布局，则必须使用百分比。谢谢！它非常接近。当我滚动时，元素确实居中，但当您向后滚动时，似乎出现了此错误。它似乎添加了相同的数量（在我的情况下，大约50%的窗口）在布局的一侧。我试着将其改为右侧，但效果相同。我将继续在这里进行拉面，但如果你认为你可能有任何见解，请随意分享！像你这样的人恢复了我对互联网人性的信仰。