wordpress教程：小工具浮动跟随的效果

天外飘仙

好的用户体验要体现在每一个细节，当你在浏览别人博客，文章很长的时候，拉到最下面发现边栏空空的什么也没有。这时，我们可以通过代码来实现，某个小工具浮动跟随的效果，来提高网站的用户体验度。
代码如下：

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. });

复制代码

可以参照最下面的注释，按照自己的需求进行修改。
还有另外一种漂浮的效果，代码如下

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. });

复制代码

查看更多 wordpress教程 wordpress主题