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

yangyou230

浏览: 1647999 次

最近访客更多访客>>

hslh22

wzawz

lyl_420819

Johnzt

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1852)

社区版块

存档分类

2011-12 ( 379)
2011-11 ( 135)
2011-10 ( 54)
更多存档...

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

分享到：

录视频感想 | javascript date format 时间格式函数

2011-11-26 23:03
浏览 1200
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论