我該如何解決這個問題，讓它在頁面頂部滾動？

Question

我正在爲我的UI設計類開發一個項目，並需要幫助將元素固定到滾動頁面的頂部。

這是我到目前爲止有：http://ieatthings.com/opinio/query.html

在滾動時，搜索欄應該向上移動，在導航欄，並很好地融入地方可以讓用戶搜索，同時在頁面的中間。但問題是，搜索欄不斷上升！

我使用了本教程中的Javascript：Fix object to top of browser window when scrolling。我嘗試了各種各樣的可能性和組合，但不幸的是沒有得到這個該死的東西去工作。

有什麼建議嗎？

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

希望這有助於！