为WordPress的侧栏小工具增加浮动跟随效果

林继 WordPress 1,914 共写了219个字 (2013-08-08 22:20:16) 没有评论 打印 扫描二维码 百度已收录

把随机文章放在小工具的最后一个,当下拉时浏览器碰到随机文章的上边时,会把随机文章往下顶。

代码如下。

  1. jQuery(document).ready(function($){   
  2. $.fn.smartFloat = function() {   
  3.     var position = function(element) {   
  4.         var top = element.position().top, pos = element.css("position");   
  5.         $(window).scroll(function() {   
  6.             var scrolls = $(this).scrollTop();   
  7.             if (scrolls > top) {   
  8.                 if (window.XMLHttpRequest) {   
  9.                     element.css({   
  10.                         position: "fixed",   
  11.                         top: 0   
  12.                     });       
  13.                 } else {   
  14.                     element.css({   
  15.                         top: scrolls   
  16.                     });       
  17.                 }   
  18.             }else {   
  19.                 element.css({   
  20.                     position: "absolute",   
  21.                     top: top   
  22.                 });       
  23.             }   
  24.         });   
  25.     };   
  26.     return $(this).each(function() {   
  27.         position($(this));                            
  28.     });   
  29. };   
  30.  
  31. //绑定,将引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"   
  32. $(".widget_bd_random_post_widget").smartFloat();   
  33.  
  34. });

按照31行的注释做相应的修改,然后将修改后的代码放到主题需要加载的JS文件里即可。

还有另外一种漂浮的效果,代码如下,效果可以点击看这里。

  1. jQuery(document).ready(function($){   
  2. //将下一行引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"   
  3.     var $sidebar   = $("#bd_random_post_widget-3"),      
  4.         $window    = $(window),      
  5.         offset     = $sidebar.offset(),      
  6.         topPadding = 50;      
  7.  
  8.     $window.scroll(function() {      
  9.         if ($window.scrollTop() > offset.top) {      
  10.             $sidebar.stop().animate({      
  11.                 marginTop: $window.scrollTop() - offset.top + topPadding      
  12.             });      
  13.         } else {      
  14.             $sidebar.stop().animate({      
  15.                 marginTop: 0      
  16.             });      
  17.         }      
  18.     });      
  19.  
  20. });

添加方法和上一个代码一样,这个效果还不错,但是如果页面加载的东西多的话会有卡的感觉。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

< >