WordPress右侧栏页面滚动时层浮动定位的实现

关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了，现在似乎在国内一些商业网站上也屡见此效果。

实现原理其实很简单。定位用absolute也好，static也可以。关键是当浏览器滚动的时候，对象（要浮动的层）要移除浏览器界面视区的时候，修改其position属性，让其浮动在窗口的上沿显示就可以了。最好的position属性就是fixed了，可以在IE6+和其他浏览器下浮动层平滑固定定位，由于IE6前辈不支持fixed属性，所以，后退一步，使用absolute属性代替，但是会有副作用——滚动不平滑。

如何判断当前层与浏览器窗口的上边缘接触呢？当浮动层与浏览器窗口上边缘接触的一瞬间，其页面垂直偏移值与页面的滚动高度其实是一致的，所以，用这个进行判断就OK了。但是，如何获得页面上元素距离页面的垂直距离呢？纯粹的js代码获得此值还是比较麻烦的，好在JavaScript库帮我们解决了这些工作，所以，我们的工作其实就很平坦，下面就将展示如何在jQuery库下实现该效果。

jQuery 下的层的智能浮动

方法代码如下：

$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: 368 //这里根据右侧栏长度自定义
});
}
});
};
return $(this).each(function() {
position($(this));
});
};

调用很简单，直接一行代码就ok了，例如下面：

$("#float").smartFloat();

当 id 为 float 的元素在滚动的时候与浏览器上边缘接触时就不会再跟随滚动条滚动。具体使用效果可以见本博客。

原文地址：http://www.zhangxinxu.com/wordpress/?p=1242

1. 还没有Trackbacks