HTML/CSS浮動邊欄，但在頁面頂部的正常行爲

我正在製作一個網頁（link），它的佈局在頂部，整個頁面上，然後在兩個並排部分下面有一個標題， div.content和div.sidebar。HTML/CSS浮動邊欄，但在頁面頂部的正常行爲

當觀看者向下滾動時，我希望邊欄保留在頁面的頂部（即浮動邊欄）。

在css中使用position:fixed時，它工作正常，除了在頁面頂部，側邊欄與標題重疊。

如果我使用top:200px，它會出現在標題下，但是當人們滾動時，側欄會保持降低狀態。

當用戶位於頁面頂部時，是否有可能讓側邊欄定期運行，因此側邊欄不會干擾頁眉，但側欄會浮動在頂端（例如，top:0px）用戶正在滾動並且標題不在屏幕上？

2012-08-17 GoogieK

恐怕你需要Javascript功能來實現這一目標，你發現只有想給菜單DIV固定的位置，當它擊中的頁面的頂部。 [這是一個教程]（http://jqueryfordesigners.com/fixed-floating-elements/），將產生[這個效果]（http://jqueryfordesigners.com/demo/fixedfloat.html） – 2012-08-17 13:59:42

@MyHeadHurts真棒，謝謝。這正是我想要的:-) – GoogieK 2012-08-17 16:35:08

一下添加到div.sidebar：

position: fixed; 
top: 200px; 
right: 20px; /* change this if you want */

來源

2012-08-17 13:54:06

謝謝，但這隻適用於標題可見時。當您向下滾動標題時，側欄仍然向下移動。我可以做到這一點，當標題阻礙時它會向下移動，但是當標題不可見時（即當查看器向下滾動時）它會轉到屏幕的頂部？ – GoogieK 2012-08-17 16:33:02

HTML/CSS浮動邊欄，但在頁面頂部的正常行爲

回答

相關問題