JQuery/CSS - 浮動列菜單

Question

我在我的頁面上有一個浮動列菜單，它的工作原理和看起來不錯，但我需要修改它一點，但不能解決如何。

的腳本是：

var name = "#floatMenu"; 
var menuYloc = null; 
$(document).ready(function(){ 
    menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) 
    $(window).scroll(function() { 
     offset = menuYloc+$(document).scrollTop()+"px"; 
     $(name).animate({top:offset},{duration:1000,queue:false}); 
    }); 
}); 

的元素 '#floatMenu' 的CSS是：

#floatMenu { position:relative; width:285px; top:0px; left:0px; } 

目前，我向下滾動頁面，在1秒鐘之後菜單追逐我失望頁面，但在到達時停止，以像素爲單位，元素距窗口頂部最初的距離。例如，在頁面加載時，浮動元素就是說，距頂部308px。當我開始向下滾動時，浮動元素總是從頂部保持308px。

是否可以修改此腳本，因此當我向下滾動時，浮動菜單始終距窗口頂部20px？

Answer 1

見http://jsfiddle.net/mblase75/uEkSq/4/

我添加了一些代碼，計算floatMenu的默認位置是否比scrollTop的大。

var name = "#floatMenu"; 
var menuYloc = null; 

$(document).ready(function() { 
    menuYloc = $("#floatMenu").offset().top; 
    $(window).scroll(function() { 
     offset = Math.max(menuYloc,$(document).scrollTop()+20); 
     $(name).animate({ 
      top: offset 
     }, { 
      duration: 1000, 
      queue: false 
     }); 
    }); 
});