如何在頁面bottum建立簡單的粘性導航？

Question

我想使它所以當你加載一個頁面一個div是堅持它的底部。然後，當用戶向下滾動時，它會粘在頂部。

我可以做的棒使用粘性元素的頂部。

<div id="container"> 
<div id="menu"> 
    <ul> 
        <li><a href='#test'>Line 1</a></li> 
        <li><a href='#'>Line 2</a></li> 
        <li><a href='#'>Line 3</a></li> 
    </ul> 
</div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(window).scroll(function(){ 
           if($(this).scrollTop()>=660) 
           { 
           $('#menu').addClass('fixed'); 
           }else{ 
               $('#menu').removeClass('fixed'); 
           } 
                   }); 
    }); 
    </script> 

我只是不能這樣做，所以它堅持負載的底部。如果不清楚的話，我附上了一個小模型。

Answer 1

更新。
Here is working jsFiddle to examine.

的jQuery：

$(document).ready(function() { 
    var windowH = $(window).height(); 
    var stickToBot = windowH - $('#menu').outerHeight(true); 
    //outherHeight(true) will calculate with borders, paddings and margins. 
    $('#menu').css({'top': stickToBot + 'px'}); 

    $(window).scroll(function() { 
     var scrollVal = $(this).scrollTop(); 
     if (scrollVal > stickToBot) { 
      $('#menu').css({'position':'fixed','top' :'0px'}); 
     } else { 
      $('#menu').css({'position':'absolute','top': stickToBot +'px'}); 
     } 
    }); 
});​ 

注意：如果你想走得更遠，我建議過檢查這個答案：

Setting CSS value limits of the window scrolling animation