[jQuery]相对父级元素的fixed定位
程序员文章站
2022-07-02 16:37:19
(function($) { var DNG = {}; // / // 相对父级元素fixed // / DNG.parentFixed = function() { // 获得需要fixed定位的元素 var el =$(".parent-fixed"); // 判断是否存在 if( el.le ......
(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);
上一篇: 走近webpack(3)--图片的处理
下一篇: 使用SAP HANA Web-based Development工具进行SQLScript练习 SAPSAP云平台SAP Cloud PlatformHANACloud
推荐阅读
-
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
-
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
-
[jQuery]相对父级元素的fixed定位
-
css子元素相对父元素进行定位的实现
-
jQuery获取所有父级元素及同级元素及子元素的方法
-
jQuery学习总结之元素的相对定位和选择器(持续更新)_jquery
-
jquery的相对父元素和相对文档定位示例代码_jquery
-
jquery的相对父元素和相对文档定位示例代码_jquery
-
父元素相对定位后,子元素在ie下被覆盖的问题!_html/css_WEB-ITnose
-
jquery的相对父元素和相对文档定位示例代码