jQuery:使用 JavaScript 让 WordPress 边栏滚动起来
见于淘宝彩票投注页面,搜一下,有三种方法实现类似的效果,这里贴出 JavaScript(jQuery) 方法,也是本站所使用的方法,CSS方法请看原文http://css-tricks.com/scrollfollow-sidebar/
步骤很简单,代码也很简洁:
$(function() { var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); });
原理:代码中的 #sidebar 就是边栏的ID, topPadding = 15 就是滚动后边栏与顶部的距离了。该代码测量触发事件 window.scroll 后窗口滚动的距离 (window.scrollTop) ,若该距离大于边栏开始时与顶部的距离 (offset.top) ,则调整边栏上外边距,从而将边栏往下推。
顺便学习 jQuery 中有两个获取元素位置的方法 offset() 和 position()。
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
2010年 6月 23日