纯代码实现WordPress侧栏跟随固定浮动效果

网站页面的侧栏不但填充了边缘的空白区域，同时可以通过小工具展现一些内容对于来访者也更加友好，但是很多时候侧栏位置都固定不变，对于较长的文章或者页面来说，滑动到底部区域，侧栏工具就滑动到了上方，侧栏将会呈现空白状态，很是不友好，也很难看。

当然很多插件可以实现这个功能（比如Q2W3 Fixed Widget），但是本着无插件万岁的原则，国庆有空捣鼓了下网站主题，实现了侧栏跟随固定浮动效果（可以选择想要跟随的小插件），基本实现了Q2W3 Fixed Widget插件的功能

不多说先上代码

<script type="text/javascript">
    jQuery(document).ready(function($){
        //得到侧边栏的起始高度，整个侧边栏的长度，
        //index获取想要固定的工具中最上方工具的高度，便于等下固定时定位
        var topindex = $("body").find("#sidebar").position().top;
        var heightindex = document.getElementById("sidebar").offsetHeight;
        var index = $("body").find(".widgit-area").eq(2).position().top;
        $.fn.smartFloat = function() {
            var position = function(element) {
                var top = element.position().top, pos = element.css("position"),heighter,isfadein = false;

                $(window).scroll(function() {
                    var scrolls = $(this).scrollTop();
                    //滑动长度超过原来的侧栏长度，固定浮动效果的工具栏fadein出现
                    if (scrolls > topindex+heightindex+50) {
                        if(isfadein == false){
                            element.css({display:"none"});
                            element.fadeIn(1000);
                            isfadein = true;
                        }
                        //这儿的css属性以各自的主题为准，下面的也一样
                        //设置css属性，固定位置，最后的宽度以自己的主题为准
                        if (window.XMLHttpRequest) {
                            element.css({position: "fixed",top: heighter-index +60,width:270,});
                        }else {
                            element.css({top: scrolls});
                        }
                    }else {
                        if(isfadein == true){
                            isfadein=false;
                        }
                        heighter = top;
                        element.removeAttr("style");
                        element.css({top: top});
                    }
                });
            };
            return $(this).each(function() {position($(this));});
        };

        //得到想要实现固定浮动效果的工具栏，并调用smartFloat函数，由于这儿有同名的用了eq(),精确确定
        $("body").find(".widgit-area").eq(2).smartFloat();
        $("body").find(".widgit-area").eq(3).smartFloat();
    });
////注：这个代码仅适用与lopor主题，其他的代码，需要自己查看边栏工具的 id 名或者 class 名，手动替换
</script>

jQuery(document).ready(function($){

//得到侧边栏的起始高度，整个侧边栏的长度，

//index获取想要固定的工具中最上方工具的高度，便于等下固定时定位

var topindex = $("body").find("#sidebar").position().top;

var heightindex = document.getElementById("sidebar").offsetHeight;

var index = $("body").find(".widgit-area").eq(2).position().top;

$.fn.smartFloat = function() {

var position = function(element) {

var top = element.position().top, pos = element.css("position"),heighter,isfadein = false;

$(window).scroll(function() {

var scrolls = $(this).scrollTop();

//滑动长度超过原来的侧栏长度，固定浮动效果的工具栏fadein出现

if (scrolls > topindex+heightindex+50) {

if(isfadein == false){

element.css({display:"none"});

element.fadeIn(1000);

isfadein = true;

}

//这儿的css属性以各自的主题为准，下面的也一样

//设置css属性，固定位置，最后的宽度以自己的主题为准

if (window.XMLHttpRequest) {

element.css({position: "fixed",top: heighter-index +60,width:270,});

}else {

element.css({top: scrolls});

}

}else {

if(isfadein == true){

isfadein=false;

}

heighter = top;

element.removeAttr("style");

element.css({top: top});

}

});

};

return $(this).each(function() {position($(this));});

};

//得到想要实现固定浮动效果的工具栏，并调用smartFloat函数，由于这儿有同名的用了eq(),精确确定

$("body").find(".widgit-area").eq(2).smartFloat();

$("body").find(".widgit-area").eq(3).smartFloat();

});

////注：这个代码仅适用与lopor主题，其他的代码，需要自己查看边栏工具的 id 名或者 class 名，手动替换

</script>

代码直接放在主题文件的footer.php对应位置就可以了

说明一下，这个代码的针对性较强，这儿的代码仅仅适用与loper主题，其他主题的话不适合小白操作，里面的id/class名，以及设置的css属性的宽度和排版位置需要查看自己主题的侧栏的属性手动设置，相当于这儿提供了一个模板，加了注释的地方都需要自己仔细对照主题修改一下

懒得折腾的可以区后台搜索Q2W3 Fixed Widget插件安装，启用后，所有小工具都会有一的Fixed Weight选项，勾选上就可以实现相同的效果，插件用法可以参考这儿wordpress大学

图片演示

如上图所示具体效果的话博主的侧栏就是一个很好的Demo哦

历史上的今天:

2018: LeetCode: 14. Longest Common Prefix(0)
2018: LeetCode: 13. Roman to Integer(0)
2018: LeetCode: 12. Integer to Roman(0)
2018: LeetCode: 11. Container With Most Water(0)

一	二	三	四	五	六	日
« 9月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

纯代码实现WordPress侧栏跟随固定浮动效果

历史上的今天:

发表评论取消回复

目前评论：1 其中：访客 1 博主 0