为了达到更好的体验效果,请使用Chrome、Firefox等现代浏览器浏览本站!

给你的WordPress侧边栏增加浮动效果

wordpress 助推站长 6689℃ 0评论

浏览本站时你可能会发现,当你浏览页面或者文章时,向下拉的时候总有一个或者两个侧边栏上浮,跟随视觉固定,这种效果不仅可以解决文章或者文章列表比较长时,拉到底下的时候想点其他页面还点拉到最上面,增强用户的体验,另外也可以让预定广告位固定,增加用户视觉长度。

效果展示

zootui WordPress tupianshangfu

 

下面分享一种网上看到的在WordPress网站中建立这种效果的代码的方法。代码如下:

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

将修改后的代码放到WordPress站点主题js文件夹中需要加载的JS文件里就行了。

 

阅读相关文章:给网站侧边栏广告栏增加浮动效果

喜欢 (3)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址