首页 » 建站技术 » WordPress » 浏览内容

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


2013-08-08 22:20:16 1,626 0 发表评论 字体: 作者:C.K.

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

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

代码如下。

jQuery(document).ready(function($){  
  • $.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: top  
  •                 });      
  •             }  
  •         });  
  •     };  
  •     return $(this).each(function() {  
  •         position($(this));                            
  •     });  
  • };  
  •  
  • //绑定,将引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"  
  • $(".widget_bd_random_post_widget").smartFloat();  
  •  
  • });
  • 按照31行的注释做相应的修改,然后将修改后的代码放到主题需要加载的JS文件里即可。

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

    jQuery(document).ready(function($){  
  • //将下一行引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"  
  •     var $sidebar   = $("#bd_random_post_widget-3"),      
  •         $window    = $(window),      
  •         offset     = $sidebar.offset(),      
  •         topPadding = 50;      
  •      
  •     $window.scroll(function() {      
  •         if ($window.scrollTop() > offset.top) {      
  •             $sidebar.stop().animate({      
  •                 marginTop: $window.scrollTop() - offset.top + topPadding      
  •             });      
  •         } else {      
  •             $sidebar.stop().animate({      
  •                 marginTop: 0      
  •             });      
  •         }      
  •     });      
  •      
  • });
  • 添加方法和上一个代码一样,这个效果还不错,但是如果页面加载的东西多的话会有卡的感觉。

      网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4855 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13459018 位访客

      广告区 Guǎng Gào