位置固定條滾動

Question

我有一部分工作。 但是由於某種原因，它不會停留在頂部。

CSS Navbox：

#navbox {
        float: left;                
        width: 150px;
        border: 1px solid blue;
        border: thin solid #CCC;
        background-color: #FFF;
        border-radius: 4px;
        padding: 5px; 
        position: fixed;
        top: 92px;  
        z-index: 1000;
    }

HTML代碼：

<div id="navbox">
    <div class="navigation">
      <a href="#aeast">AFC East</a> <br />
      <a href="#anorth">AFC North</a> <br />
      <a href="#asouth">AFC South</a> <br />
      <a href="#awest">AFC West</a> <br />
    </div>
</div>

不滾動時。 當我滾動 我猜這與top 。

它在中間部分的容器中。

容器是：

#container {
    width: 870px;
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;                                         
}

Answer 1

這里唯一的選擇是使用JavaScript在確定項目position: fixed;之前確定滾動位置position: fixed; 。 我推薦ScrollToFixed，因為它支持邊界和邊距。

更新：

您可以使用position: sticky; （並帶有瀏覽器前綴）[ 參考 ]，以便以更具創造性的方式進行此操作，尤其是針對iOS進行修復。

Answer 2

position:fixed相對於瀏覽器窗口 ，而position:absolute; 是相對於文檔的 ，還是與position:relative最接近的父級。

因此，在您的情況下，通過使用position:fixed ，div將始終位於瀏覽器窗口 top:92px （ top:92px ） top:92px 。 如果您希望它向上滾動（與頁面頂部的距離相同），請使用position:absolute 。

---

小提琴

1. position:fixed -http position:fixed //jsfiddle.net/yB45v/
2. position:absolute -http position:absolute //jsfiddle.net/43SZW/

Answer 3

您可以提供position:fixed或position:absolute值，以將div移動到頁面上的任何特定位置。

使用`position：absolute'時，父div位置應該是相對的。

所以結論是您可以通過這兩種方法進行設置

.element{ position:fixed; top:2%; right:2%; }
.element{ position:absolute; top:50px; right:50px; } /*parent div should be in relative position.