如何創建當你到達跟隨你動態導航欄某些位置

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

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

當您訪問given website時，嘗試向下滾動，您就會明白我在說什麼。由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; 
}

來源

2012-04-10 Alvis Chen

此問題已在此處得到解答http://stackoverflow.com/q/6691558/144432 – 2012-04-10 12:12:15

保持在同一位置的元素可以通過fixed position造型來實現。如果你想讓你的導航欄保持在完全相同的位置，position:fixed;就足夠了。（至少是非IE6）

你可以找到a working example和一些細節here

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

查看this question瞭解如何做到這一點的示例。

來源

2012-04-10 11:54:04

謝謝，但我不想菜單繼續關注。我想要的導航就像給定的網站一樣。你有沒有這樣的例子？ – 2012-04-10 12:02:19

檢查這個答案http://stackoverflow.com/a/6691623/144432 – 2012-04-10 12:10:37

我做到了！非常感謝！！ – 2012-04-10 16:06:34

注意：這不適用於Android 2.3瀏覽器; position:fixed不會像預期的那樣表現出色 - 它在跳回頂端之前暫時將其位置添加到滾動元素。

來源

2013-08-09 10:24:21

如果你想你可以設置z-index是一個特定的號碼，並應該工作。

示例 z-index：100;

來源

2015-08-03 18:42:13 SandStormFlux

如何創建當你到達跟隨你動態導航欄某些位置

回答

相關問題