JQuery实现导航菜单栏随滚动条上下滚动

文章摘自：JQuery实现导航菜单栏随滚动条上下滚动

实现 jquery 导航栏随界面下翻固定在页面顶部

html

<div class="header">
    <div class="logo">
        JQuery实现导航菜单栏随滚动条上下滚动 <span>- alleyloft.com</span>
    </div>
</div>
<div class="placeholder"></div>
<div class="nav">
    <div class="ul-box">
        <ul class="links">
            <li>
                <a href="http://www.alleyloft.com" target="_blank" class="cur">小巷阁楼</a>
            </li>
            <li>
                <a href="http://www.alleyloft.com/blog" target="_blank">生活随笔</a>
            </li>
            <li>
                <a href="http://www.alleyloft.com/share" target="_blank">技术分享</a>
            </li>
        </ul>
    </div>
</div>

js

<script type="text/javascript">
    $(function(){
        $(window).scroll(function(){
            $offset = $('.placeholder').offset();//不能用自身的div，不然滚动起来会很卡
            if($(window).scrollTop()>$offset.top){
                $('.nav').css({
                'position':'fixed',
                'top':'0px',
                'left':$offset.left+'px',
                'z-index':'999'
                });    
            }else{
                $('.nav').removeAttr('style');
            }
        });
    })
</script>