滚动菜单跟随 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动菜单跟随</title>
	
</head>
<style>
	*{margin:0;padding: 0;}
	a{color: #000;}
	.header{		
		position: fixed;
		top:0;
		left:0;
		right: 0;
		background: #fff;
	}
	nav{		
		width: 1000px;
		margin: 0 auto;
		height:100px;
		line-height:100px;
	}
	nav li{display: inline-block;padding:0 20px;}

	nav li.active a{
		color: #22b573;
	}

	.mode{height:1000px;background: #ccc;}

	.content{
		margin-top: 100px;
	}
</style>

<body>
	<div class="header">
		<nav>
			<ul class="nav nav-tabs">
				<li class="page-scroll">
					<a href="#w1">wrap 1</a>
				</li>
				<li class="page-scroll">
					<a href="#w2">wrap 2</a>
				</li>
				<li class="page-scroll">
					<a href="#w3">wrap 3</a>
				</li>
				<li class="page-scroll">
					<a href="#w4">wrap 4</a>
				</li>
			</ul>
		</nav>
	</div>
	<div class="content">		
		<div id="w1" class="mode">
			w1速度快打开的
		</div>

		<div id="w2" class="mode">
			w2速度快打开的
		</div>
		<div id="w3" class="mode">
			w3速度快打开的
		</div>
		<div id="w4" class="mode">
			w4速度快打开的
		</div>
	</div>
</body> 
</html>  

<script type="text/javascript" src="https://files.cnblogs.com/files/tonnytong/___jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/tonnytong/_bootstrap.js"></script>
<script type="text/javascript">
	$(function(){
		var $offset = 0;
            $offset = $(".header").height()+12;
            $('.page-scroll a').click(function(event) {
                var $position = $($(this).attr('href')).offset().top;
                $('html, body').stop().animate({
                    scrollTop: $position - $offset
                }, 600);
                event.preventDefault();
            });
        $('body').scrollspy({target: '.header', offset: $offset+2});
	});
</script>

　　

 

posted @ 2017-11-30 15:37  南侠书生  阅读(250)  评论(0)    收藏  举报