码疯窝

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

一、侧边栏固定

因为我们文章是以瀑布流的方式显示,如果滚动到下面,侧边栏就会看不到,这不是我们想到的,所以我们必须将它的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篇阅读次数最多或最爱欢迎的文章:

应用好代码之后,显示到是显示出来了,可以样式不好弄啊。
不会要我去改插件源代码吧,不应该这么不人性化啊。于是去插件设置里面去看了一下。果然,在Most View Template 一项里面看到了生成html 的格式,果断修改成我想要的格式。
  • >%POST_TITLE%
  • 然后调一下CSS,效果如下。
    结束语:今天就小改了一下侧边栏。
    继续查看有关 日志连载的文章

    0个访客评论