首页 > 上海日记 > WordPress右侧栏页面滚动时层智能浮动定位
2013
03-07

WordPress右侧栏页面滚动时层智能浮动定位

  北街今天下午闲暇浏览博客的时候,发现MG12网站的右侧栏很有特点,于是参照了“鑫空间,鑫生活”的一篇文章,总算实现了Wordpress右侧栏页面滚动时层智能浮动定位滚动的效果。

  下面介绍一下“Wordpress 右侧栏页面滚动时层智能浮动定位滚动”实现原理:

  当我们的浏览器在上下滚动,对象(要浮动的层)要移除浏览器界面视区的时候,修改其 position 属性,让其浮动在窗口的上沿显示就可以了。最好的 position 属性就是 fixed 了。

  那么,如何判断当前层与浏览器窗口的上边缘接触呢?

  因为当浮动层与浏览器窗口上边缘接触的一瞬间,其页面垂直偏移值与页面的滚动高度其实是一致的,所以用这个进行判断就 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 的元素在滚动的时候与浏览器上边缘接触时就不会再跟随滚动条滚动。

最后编辑:
作者:北街
身高八尺,腰围也是八尺!
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

WordPress右侧栏页面滚动时层智能浮动定位》有 11 条评论

  1. 之前也打算弄,Google过,觉得麻烦放弃了,现在发现边栏基本上比文章长,囧rz

  2. 十万酒 说:

    折腾了,结果效果不明显,难道是我弄错了……

  3. 这个效果最近非常流行,好像还有导航条不动的,图片懒加载,感觉都是最近一年流行起来的设计。

  4. 不懂代码的飘过~~

  5. cheap jersey 说:

    我一直都想要实现这个效果。。我去折腾一下。看看能不能实现。

  6. huangjun 说:

    貌似看到很多博客都有这个效果。

留下一个回复

你的email不会被公开。

This site uses Akismet to reduce spam. Learn how your comment data is processed.