Javascript 如何在页面底部构建简单的粘性导航？

我试图让它成为这样，当你加载一个页面时，一个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>

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>=660）
           {
$（'#menu'）.addClass（'fixed'）；
}其他{
$（“#菜单”）.removeClass（'fixed'）；
           }
                   });
    });
    

我就是做不到，所以它会粘在底部。如果不清楚的话，我附上了一个小模型

---

更新。

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'});
        }
    });
});​

注意：如果您想进一步了解，我建议您也检查一下这个答案：

---

如何确保它始终位于浏览器底部？有点像粘性的页脚。您应该重新计算

var windowH=$（window.height（）

并在resize（和+1）上调整处理程序。你知道为什么网站的内容会在页面一路加载后出现然后消失吗？当我滚动所有内容时都会显示备份…只有当我有这个脚本时才会发生。我已经确定这似乎只发生在Firefox中（我有24个），我认为这个bug与stick函数无关，因为我检查了第一个div.row推送内容。尝试删除第一个，用margin@cschneider27推送内容区域