今天是周六,可以继续代码。
一、侧边栏固定
因为我们文章是以瀑布流的方式显示,如果滚动到下面,侧边栏就会看不到,这不是我们想到的,所以我们必须将它的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 的格式,果断修改成我想要的格式。 然后调一下CSS,效果如下。 结束语:今天就小改了一下侧边栏。 继续查看有关 日志连载的文章
0个访客评论