Ai
1 Star 0 Fork 0

ubuntuvim/programmer_daily

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
sidebar-follow-jquery.js 4.20 KB
一键复制 编辑 原始数据 按行查看 历史
ubuntuvim 提交于 2015-07-25 13:18 +08:00 . modify index.html
/**
* @author: mg12 [http://www.neoease.com/]
* @update: 2012/12/05
*/
SidebarFollow = function() {
this.config = {
element: null, // 处理的节点
distanceToTop: 0 // 节点上边到页面顶部的距离
};
this.cache = {
originalToTop: 0, // 原本到页面顶部的距离
prevElement: null, // 上一个节点
parentToTop: 0, // 父节点的上边到顶部距离
placeholder: jQuery('<div>') // 占位节点
}
};
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'
});
}
}
};
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/ubuntuvim/programmer_daily.git
git@gitee.com:ubuntuvim/programmer_daily.git
ubuntuvim
programmer_daily
programmer_daily
master

搜索帮助