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

最新推荐文章于 2024-01-29 10:23:50 发布

baoeni

最新推荐文章于 2024-01-29 10:23:50 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript jQuery CSS+HTML 文章标签： jquery插件 function swing div html jquery

本文链接：https://blog.youkuaiyun.com/baoeni/article/details/7015717

Javascript 同时被 3 个专栏收录

57 篇文章

订阅专栏

CSS+HTML

22 篇文章

订阅专栏

jQuery

3 篇文章

订阅专栏

本文介绍了一个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滚动到响应的段落