滑動/關注導航菜單

Question

我正在尋找一個簡單的jQuery或Javascript解決方案，以便在用戶向下滾動頁面時平滑地跟隨導航邊欄。 這裏的東西：http://ucon-acrobatics.com/shop/

任何想法，讚賞。

Answer 1

首先拿到榜首的位置：

offset_top = $("#menu").offset().top  // absolute 
position_top = $("#menu").position().top // relative to parent 

然後創建一個事件：

$(window).scroll(function() { 
    if($(this).scrollTop() >= offset_top) { 
    $("#menu").css("top", $(this).scrollTop() - position_top); 
    } 
}); 

參見我的例子：http://jsfiddle.net/elektronikLexikon/LaVmG/

或更改animate鏈接在第二版：http://jsfiddle.net/elektronikLexikon/LaVmG/2/

Answer 2

最簡單的方法是在導航上使用position:fixed，這樣做的好處是不會太滯後。

您可能決定使用position:absolute，直到用戶滾動經過某個點後才轉到position:fixed。