目前有些浏览器不支持position: sticky属性,并且safair浏览器不用版本支持度也有所区别(12.1的貌似不支持,但是11.多的又可以...)
实现效果如下:
头部的html结构:
<ul class="purchase_immigration_alink init_top">
<li><a href="#mao_youshi">项目优势</a></li>
<li><a href="#mao_tiaojian">申请条件</a></li>
<li><a href="#mao_liucheng">办理流程</a></li>
<li><a href="#mao_qingdan">费用清单</a></li>
<li><a href="#mao_yimyoushi">侨居移民优势</a></li>
<li><a href="#mao_guobieyous">国别优势</a></li>
<li><a href="#mao_zixun">热门资讯</a></li>
<li><a href="#mao_fangyuan">精品房源</a></li>
<li><a href="#mao_hudong">互动专区</a></li>
<li><a href="#mao_fuli">领取福利</a></li>
</ul>
页面右侧的html结构
<!-- 页面右侧 -->
<div class="purchase_immigration_right fl init_top">
<div class="news_happening">
总费用<span>25</span><i>万欧元</i><a href="#">咨询移民顾问<i></i></a>
</div>
<ul>
<li>
<p>29万欧元</p>
费用总览
</li>
<li>
<p>10-12个月</p>
办理周期
</li>
<li>
<p>无居住要求</p>
居住要求
</li>
<li>
<p>永久居民</p>
身份类型
</li>
<li>
<p>最多六个文字</p>
语言要求
</li>
<li>
<p>无学历要求</p>
学历要求
</li>
<div class="cb"></div>
</ul>
<!-- 评估 -->
<div class="evaluation_qualification">
<h6>免费评估移民资格</h6>
<div class="input_text">
<input type="text" placeholder="姓名：（选填）">
<input type="text" placeholder="手机：（必填）">
</div>
<p><span>*</span>我们承诺保护您的个人隐私！</p>
</div>
</div>
吸顶效果
当子元素到达父元素底部取消吸顶
// 判断浏览器是否支持sticky 属性
var sticky = (function () {
var vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'],
vendorListLength = vendorList.length,
stickyElement = document.createElement('div');
for (var i = 0; i < vendorListLength; i++) {
stickyElement.style.position = vendorList[i] + 'sticky';
console.log('stickyElement',stickyElement)
if (stickyElement.style.position !== '') {
return true;
}
}
return false;
})();
// 设置元素的fiexd属性
function divFixedTop (ele,top) {
let scrollTop = $(window).scrollTop() + top; //滚动条的位置加上当前元素的fixed的top值(用来动态设置fixed的top值的触发点)
let parentTop = $(ele).parent().height() + $(ele).parent().offset().top; //获取当前元素的父元素距离文档的top值加上父元素的高度(用来限制子元素在父元素的底部活动范围)
let eleRelativePosition = $(ele).parent().height() - $(ele).height(); //获取fixed后子元素在父元素里面的活动范围(超出则改变子元素的fixed属性为relative,并赋值给子元素的relative的top上)
let thisTop = $(ele).data("top"); //获取当前元素存储在元素属性当前的top值
let margin_top = $(ele).data("margin-top").slice(0,$(ele).data("margin-top").length - 2); //获取当前元素存储在元素dom属性上的margin-top值并截取掉除px的值
let left = $(ele).offset().left; //获取元素静态时距离页面左边的偏移量,用来设置fixed的left值
if (scrollTop >= thisTop - margin_top) {
$(ele).css({
'position': 'fixed',
'bottom': 'auto',
'margin-top': '0px',
'top': top + 'px',
'left': left + 'px'
})
} else if (scrollTop <= thisTop + margin_top){
$(ele).css({
'position': 'static',
'margin-top': margin_top + 'px', //精确fixed的top值
'top': '',
'left': ''
})
}
if ((parentTop - $(ele).height()) <= scrollTop) {
$(ele).css({
'position': 'relative',
'margin-top': '0px',
'top': eleRelativePosition,
'left': ''
})
}
};
获取sticky 用来判断浏览器是否支持sticky css属性如果不支持就监听页面滚动事件并调用封装的divFixedTop 方法
//如果当前浏览器兼容position: sticky,属性就返回
if (sticky) {
return;
// 否则就动态js设置元素的fixed触发值
} else {
//每次滚动就监测调用divViewHeight()方法,判断是否到达触发点
$(window).on('scroll',function() {
divFixedTop('.purchase_immigration_alink',0);
divFixedTop('.purchase_immigration_right',70);
divFixedTop('.interactive_welfare_right',70);
})
}
目前市面上多数浏览器可以兼容stickt属性,但是还是存在不兼容问题(包括同一个浏览器的不同版本),所以已上代码可以解决目前已知所有浏览器的兼容stickt属性问题(其实是不兼容的就动态设置fixed属性超出父元素高度就取消fixed,从而模拟sticky属性)
--over--
