今天是周六，可以继续代码。

一、侧边栏固定

因为我们文章是以瀑布流的方式显示，如果滚动到下面，侧边栏就会看不到，这不是我们想到的，所以我们必须将它的css属性改为fixed，然后给他加一个top属性。

原理很简单，就是监听scoll事件，然后判断将他的position 属性修改为fixed 还是 static。因为代码我正好有现成了，所以就不自己码了，偷一下懒，直接贴上代码，非原创。

SidebarFollow = function() {
        this.config = {
                element: null, // 处理的节点
                distanceToTop: 0 // 节点上边到页面顶部的距离
        };
        this.cache = {
                originalToTop: 0, // 原本到页面顶部的距离
                prevElement: null, // 上一个节点
                parentToTop: 0, // 父节点的上边到顶部距离
                placeholder: jQuery('
') // 占位节点
        }
};
SidebarFollow.prototype = {
        init: function(config) {
                this.config = config || this.config;
                var _self = this;
                var element = jQuery(_self.config.element);

                // 如果没有找到节点, 不进行处理
                if(element.length <= 0) {
                        return;
                }

                // 获取上一个节点
                var prevElement = element.prev();
                while(prevElement.is(':hidden')) {
                        prevElement = prevElement.prev();
                        if(prevElement.length <= 0) {
                                break;
                        }
                }
                _self.cache.prevElement = prevElement;

                // 计算父节点的上边到顶部距离
                var parent = element.parent();
                var parentToTop = parent.offset().top;
                var parentBorderTop = parent.css('border-top');
                var parentPaddingTop = parent.css('padding-top');
                _self.cache.parentToTop = parentToTop + parentBorderTop + parentPaddingTop;

                // 滚动屏幕
                jQuery(window).scroll(function() {
                        _self._scrollScreen({element:element, _self:_self});
                });

                // 改变屏幕尺寸
                jQuery(window).resize(function() {
                        _self._scrollScreen({element:element, _self:_self});
                });
        },
        /**
         * 修改节点位置
         */
        _scrollScreen: function(args) {
                var _self = args._self;
                var element = args.element;
                var prevElement = _self.cache.prevElement;

                // 获得到顶部的距离
                var toTop = _self.config.distanceToTop;

                // 如果 body 有 top 属性, 消除这些位移
                var bodyToTop = parseInt(jQuery('body').css('top'), 10);
                if(!isNaN(bodyToTop)) {
                        toTop += bodyToTop;
                }

                // 获得到顶部的绝对距离
                var elementToTop = element.offset().top - toTop;

                // 如果存在上一个节点, 获得到上一个节点的距离; 否则计算到父节点顶部的距离
                var referenceToTop = 0;
                if(prevElement && prevElement.length === 1) {
                        referenceToTop = prevElement.offset().top + prevElement.outerHeight();
                } else {
                        referenceToTop = _self.cache.parentToTop - toTop;
                }
                // 当节点进入跟随区域, 跟随滚动
                if(jQuery(document).scrollTop() > elementToTop) {
                        // 添加占位节点
                        var elementHeight = element.outerHeight();
                        _self.cache.placeholder.css('height', elementHeight).insertBefore(element);
                        // 记录原位置
                        _self.cache.originalToTop = elementToTop;
                        // 修改样式
                        element.css({
                                top: toTop + 'px',
                                position: 'fixed'
                        });
                // 否则回到原位
                } else if(_self.cache.originalToTop > elementToTop || referenceToTop > elementToTop) {
                        // 删除占位节点
                        _self.cache.placeholder.remove();
                        // 修改样式
                        element.css({
                                position: 'static'
                        });
                }
        }
};

不过这家伙写js的风格跟我挺像的，难道是在模仿我？

二、热门文章

这是我目前的侧边栏。

目测最新评论文章是多余的，因为如果哪天很多人都在评论某一篇文章，那不是这里全是一样的么，就像现在一样，所以我决定把最新评论文章改为热门文章。

热门文章可以理解为两种，一种是浏览最多的，另一种是评论最多的。这看个人偏好了，我的文章没啥人来评论，就用浏览最多的吧。:0)

因为我已经用过了postview 的插件，所以我决定查一下它有没有提供方法，一查果然发现了。

显示10篇阅读次数最多或最爱欢迎的文章:

>%POST_TITLE%

本博客所有文章如无特别注明均为原创。作者：Gcaufy
复制或转载请以超链接形式注明转自码疯窝，原文地址 建站直播-从零开始基于WordPress建站历程（七）— 装修之【侧边栏】