jquery插件之 waypoints --页面滚动自动更新菜单

本文介绍了一个cool的jQuery插件,该插件能够在页面滚动时自动更新固定在页面上方的菜单选项。通过使用jQuery的waypoints插件,可以实现在不同位置的段落自动激活相应的菜单项,并且提供了一个简单的demo演示。

今天介绍一个非常cool的jquery插件,当页面滚动时,固定在页面上方的菜单会自动更新选项,详情请查看:

http://imakewebthings.github.com/jquery-waypoints/#about


我做的一个demo如下


<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Page Title</title>

	<style type="text/css" media="screen">
		div{
			border:1px solid red;
			height:1000px;
			margin:50px;
		}
		ul{
			position:fixed;
			top:0px;
			right:10px;
		}
		li.linkactive{
			color:red;
		}
		div.active{
			background-color:#ccc;
		}
	</style>
</head>
<body onload="">
	<ul class="list">
		<li>div1</li>
		<li>div2</li>		
		<li>div3</li>		
	</ul>
	<div >
		div 1
	</div>
	<div >
		div 2
	</div>
	<div >
		div 3
	</div>

	<script src="jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="waypoints.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		jQuery(function($) {
			var waypointSelector = 'div';
			var activeClass = 'active';
			var linkSelector = 'ul li';
			var linkActiveClass = 'linkactive';
			
			// Register each section as a waypoint.
			$(waypointSelector).waypoint();

			// The same for all waypoints
			$('body').delegate(waypointSelector, 'waypoint.reached', function(event, direction) {
				var $active = $(this);
				var pos = $(waypointSelector).index($active);

				if (direction === "up" && pos != 0) {
					$active = $active.prev();
				}
				if (!$active.length) $active.end();
				var pos = $(waypointSelector).index($active);
				
				$(waypointSelector+'.'+activeClass).removeClass(activeClass);
				$active.addClass(activeClass);
				
				$(linkSelector+'.'+linkActiveClass).removeClass(linkActiveClass);
				$(linkSelector).eq(pos).addClass(linkActiveClass);
				
			});
			
			// Wicked credit to
			// http://www.zachstronaut.com/posts/2009/01/18/jquery-smooth-scroll-bugs.html
			var scrollElement = 'html, body';
			$('html, body').each(function () {
				var initScrollTop = $(this).attr('scrollTop');
				$(this).attr('scrollTop', initScrollTop + 1);
				if ($(this).attr('scrollTop') == initScrollTop + 1) {
					scrollElement = this.nodeName.toLowerCase();
					$(this).attr('scrollTop', initScrollTop);
					return false;
				}    
			});

			// Smooth scrolling for internal links
			$(linkSelector).click(function(event) {
				event.preventDefault();
				
				var activeWaypoint = $(waypointSelector).eq($(linkSelector).index($(this)))
				$('html, body').stop().animate({
					'scrollTop': activeWaypoint.offset().top
				}, 500, 'swing', function() {
					
				});

			});
		
		});
	</script>
</body>
</html>


主要步骤:

1 把段落加入waypoint

2 设置waypoint事件响应函数,这里的例子更新段落的背景和菜单的颜色

3 点击菜单是让window滚动到响应的段落



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值