如何創建一個動態導航欄，當您到達某個位置時會跟隨您

Question

我想創建一個類似於此站點的導航欄：

http://www.mysupermarket.co.uk/#/shelves/top_offers_in_asda.html

誰能告訴我如何創建導航欄，它會在您向下滾動頁面時跟隨您，但在頁面初始加載時不會跟隨您？

當您訪問給定的網站時，嘗試向下滾動，您就會明白我在說什么。 由MY SHOP、OFFERS、IDEAS & LIFESTYLE、BAKERY等組成的導航欄...

我真的不知道它叫什么。 至少告訴我它叫什么，這樣我就可以搜索了。

這是我完成的解決方案

window.onscroll = function(){
    if(getScrollTop()>140) {
        document.getElementById("menu").style.position="fixed";
    } else {
        document.getElementById("menu").style.position="";
    }
}

function getScrollTop() {
    if (window.onscroll) {
        // Most browsers
        return window.pageYOffset;
    }

    var d = document.documentElement;
    if (d.clientHeight) {
        // IE in standards mode
        return d.scrollTop;
    }

    // IE in quirks mode
    return document.body.scrollTop;
}

Answer 1

通過固定 position樣式可以實現在相同的 position 上持有一個元素。 如果你想讓你的導航欄保持在完全相同的位置， position:fixed; 足夠。 （至少非 IE6）

您可以在此處找到一個工作示例和一些詳細信息

但是，如果您希望導航欄在向下滾動頁面時從其初始位置移動到頁面的頂部邊框，則必須實現一些 JavaScript 來捕獲頁面滾動事件並相應地移動<div> 。

有關如何執行此操作的示例，請參見此問題。

Answer 2

注意：這不適用於 Android 2.3 瀏覽器； position:fixed不會像預期的那樣運行 - 它在跳回頂部之前暫時將其 position 附加到滾動元素。

Answer 3

如果你願意，你可以將 z-index 設置為一個特定的編號，這樣就可以了。

示例 z-index:100;