如何构建页面bottum简单粘导航？(How to build simple sticky navi

我想使它所以当你加载一个页面一个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:

更新。
在这里工作的jsfiddle检查。

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

注意：如果你想走得更远，我建议过检查这个答案：

设置窗口滚动动画的CSS值范围

文章来源: How to build simple sticky navigation at the page bottum?