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

发表时间:2013-06-17 10:57 | 分类:建站生活 | 浏览:708 次

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

实现原理其实很简单。定位用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

本文标签:

本文链接:http://www.sijitao.net/1355.html

本文版权虫虫开源所有,欢迎您在本博客中留下评论,如需转载原创文章请注明出处,谢谢!

已经有5个回复
Comment (5)
Trackbacks (0)
  1. 葉家小子  ( 2013.08.17 19:01 ) : #-9

    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) {想问下这一段代码应放在哪个文件里呢?

    回复
    • 章郎虫  ( 2013.08.18 21:26 ) :

      我是直接放在wordpress文章页面的末尾。

      回复
      • 葉家小子  ( 2013.08.19 00:48 ) :

        $(“#float”).smartFloat(); 那这一段就放在边栏里吗?

        回复
        • 章郎虫  ( 2013.08.19 11:06 ) :

          和上面代码放在一起就可以了。…….. return $(this).each(function() { position($(this)); });};$(“#float”).smartFloat();

          回复
  1. 还没有Trackbacks
icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

一键脚本 SSH攻击 IP查询 博客历程 留言本 文章归档 网站地图 谷歌地图
托管于阿里云&七牛云. 已加入博客联盟. 浙ICP备13025236号.
Copyright © 2010-2016 虫虫开源 All Rights Reserved.