如何用jQuery实现在鼠标滚动后导航栏保持固定

文章来自  http://blog.csdn.net/bboyjoe/article/details/46697673

 

<div class="header-bottom">
			<div class="container">			
				<div class="logo">
					<a href="home"><img src="static/web/images/logo.png" alt="远地资产 " /></a>
				</div>
				<div class="top-nav">
					<span class="menu"> </span>
					<ul>
						<li><a href="home" class="scroll" >首页</a></li>
						<li><a href="about" class="scroll">关于我们</a></li>
						<li><a href="services" class="scroll">服务领域</a></li>
						<li><a href="project" class="scroll">业务案例</a></li>
						<li><a href="references" class="scroll">合作伙伴</a></li>
						<li><a href="activities" class="scroll">官方活动</a></li>
						<li><a href="news" class="scroll">新闻资讯</a></li>
						<li><a href="contact" class="scroll">联系我们</a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>

	        </div>

 

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    margin: 0 auto;
    left: 0;
    border-bottom: 2px solid #113f6c;
    z-index: 10000;
}

 

<script>
        $(document).ready(function() {
            var navOffset=$(".header-bottom").offset().top;
            $(window).scroll(function(){
                var scrollPos=$(window).scrollTop();
                if(scrollPos >=navOffset){
                    $(".header-bottom").addClass("fixed");
                }else{
                    $(".header-bottom").removeClass("fixed");
                }
            });

        });
    </script>

 

http://www.shydzc.com