首先要说明下,这个定位显示效果跟你博客上有没用widget小工具没关系,不要以为你用了小工具,就会加不上,敢拷贝下面的代码,你就一定能加上去...嗯,很霸气地说....
wordpress博客侧栏滚动模块定位显示,具体效果可直接拖动本页面,看右侧的"搜索查找"模块的展示效果!
很多站长都喜欢加上这样的效果,好像现在挻流行这样弄的,呵...
之前自己也根据自己博客的需要写了个,应用在侧边栏的"搜索查找"模块,并发表了一篇wordpress博客侧边栏滚动定位效果简单记录了下实现思路,后来就一直没动过这块了,现在看下那篇文章写的比较粗糙,文章上提到的可直接拿来用,是不可信的....哈。。。。
前些天有网友留言求助说自己站上想加这样的效果上去,但一直没能加成功!本人向来乐于助人,...好吧,这句话说出来自己都感觉有点虚,哈...实际上,当时我是想着帮这位朋友弄一下,顺便也能藉此机会整理下自己之前写的代码模块,方便自己以后有需要时可直接拿来套用!
源码:
<script type="text/javascript"> (function($){ $.fn.extend({ /** * 功能:wp博客侧栏滚动模块定位显示 * 引用方式:$(obj).scrPosition() obj 为要添加滚动定位的模块独有的id或class标识 * 说明:页面必须有侧边栏#sidebar、页脚#footer标识(有管理员导航栏时,默认标识为:#wpadminbar),如果标识不一样,须额外指定,如:$(obj).scrPosition({sidebar:"你的标识"}); * point参数默认为true,表示当滚动页面,侧边栏底部刚好接触到浏览器顶部时就固定指定的滚动定位模块位置,若设置point:false,表示当滚动页面,当指定的滚动定位模块接触到浏览器顶部时才固定指定的滚动定位模块位置! * 默认滚动定位的模块距离浏览器顶部10px,若要修改这个默认值可额外设置spacing:value 中的value值 */ scrPosition:function(options){ var defaults={sidebar:"#sidebar",footer:"#footer",wpadminbar:"#wpadminbar",spacing:10,point:true}; var opts=$.extend(defaults,options); var _this=this; var sbTop=opts.point?$(opts.sidebar).offset().top+$(opts.sidebar).outerHeight(true):this.offset().top; var sbLeft=this.offset().left; var fTop=$(opts.footer).offset().top; $(window).scroll(sbEvent=function(){ var wTop=$(window).scrollTop(); var wLeft=$(window).scrollLeft(); var dValue=wTop+$(opts.wpadminbar).height()+opts.spacing+_this.outerHeight(true)-fTop; if(wTop+$(opts.wpadminbar).height()>=sbTop&&dValue<0){ _this.css({ position:"fixed", left:sbLeft-wLeft, top:$(opts.wpadminbar).height()+opts.spacing }); if($.browser.msie && parseInt($.browser.version)<7){ _this.css({ position:"absolute", top:wTop+$(opts.wpadminbar).height()+opts.spacing }) } }else if(dValue>=0){ _this.css({ position:"absolute", left:sbLeft-wLeft, top:fTop-_this.outerHeight(true) }) }else{ _this.css("position","static"); _this.css("top",0); } }); } }) })(jQuery); $("#php_widget-11").scrPosition({point:false}); </script>
现在“wordpress博客侧栏滚动模块定位显示”功能已作了封装处理,好处不言而喻。如果博客用的是标准主题,想加这个效果直接拷贝下面代码,再把“$('#php_widget-11').scrPosition();”这句中的#php_widget-11替换成你要加滚动定位显示的模块的标识(id 或 class) 即可!
若没效果出来,或报错什么的,你就要详细看下代码中的用法注释了,只是几个注意事项,不是叫你去看代码实现逻辑,别怕,中文注释来的,哈.....
最后说句“wp博客侧栏滚动定位源码解析”中的解析部分就略去了,哈,感觉自己标题党啦...不过真解析出来,大伙可能会觉得在看无字天书,不知所言何物。倒不如直接叫大伙拷代码拿去用来得实在!!!
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}