(function($) {
var DNG = {};
//----------------------------------------------------/
// 相对父级元素fixed
//----------------------------------------------------/
DNG.parentFixed = function() {
// 获得需要fixed定位的元素
var el =$(".parent-fixed");
// 判断是否存在
if( el.length > 0){
el.each(function(){
$this = $(this);
// 获取父级元素 父级元素定位 父级元素高度
$this.parentOffset = $this.offsetParent();
$this.parentOffsetY = $this.parentOffset.offset().top;
$this.parentHeight = $this.parentOffset.height();
// 获取元素定位 元素高度
$this.oldPositionY = $this.positionY = $this.position().top;
$this.height = $this.height();
// 计算元素滑动最大值 = 父级元素定位 + 父级元素高度 - 元素定位 - 元素高度
$this.maxScroll = $this.parentOffsetY + $this.parentHeight - $this.positionY - $this.height;
// 滑动触发事件
$(window).scroll(function(){
$this.Scroll = $(window).scrollTop();
// 判断1：小于父级元素定位
// 判断2：大于父级元素定位,小于滑动最大范围
// 判断3：大于滑动最大范围
if( $this.Scroll < $this.parentOffsetY ){
$this.positionY = $this.oldPositionY;
} else if( $this.Scroll >= $this.parentOffsetY && $this.Scroll <= $this.maxScroll ){
// 计算元素Top定位,滑动距离 - 父级元素定位 + 元素定位
$this.positionY = $this.Scroll - $this.parentOffsetY + $this.oldPositionY;
} else{
$this.positionY = $this.maxScroll - $this.parentOffsetY + $this.oldPositionY;
}
// 改变元素定位
$this.css("top",$this.positionY);
});
});
}
};
//----------------------------------------------------/
// end
//----------------------------------------------------/
$(document).ready(function() {
DNG.parentFixed();
});
})(jQuery);
我要评论
网友评论