今天介绍一个非常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滚动到响应的段落