超出指定距离固定导航（微信浏览器页面没有加载完获取控件属性办法）

工作需求 —— 首页banner图下面有一个产品筛选导航，当往下滑动，筛选栏被遮盖的时候要求筛选栏固定在顶部，即内容不会被隐藏，永远显示在最顶端。

 

解决思路：

获取筛选栏到body顶部的距离，如果滚动条的距离大于筛选栏到顶部的距离就让其固定在顶部

 

问题：

发现在“微信”浏览器中，页面加载完获取筛选div控件到body顶部的距离不正确，因为，图片等信息没有加载完成，导致页面还没有完全被“撑开”，导致获取的数据不正确

 

解决思路：

1、需要等待页面内容加载完毕之后，再获取筛选div控件到body顶部的距离。

2、在页面出现滚动条的时候，表示页面已经被撑开了，内容已经下载完成。那么，在第一次滚动条变化的时候获取div控件到body顶部的值。

 

//过滤条件div监听器，判断是否固定在顶部;
//使用闭包
function filterDivListerner(){
//顶部过滤div距离body控件的距离
var top_filter_div ;
//用户标记是否滚动了滚动条
var flag = true;
window.onscroll = function(){
//获取滚动条的高度
var t = document.documentElement.scrollTop || document.body.scrollTop;
//第一次滚动的时候记录“过滤div”距离顶部的距离
//出现了滚动条，则表明图片已经加载完毕了，解决页面代码加载完之后，内容没有显示出来导致获取控件属性不准确的问题
if(flag){
flag = false;
//页面加载完之后获取控件距离顶部的距离，适配不同尺寸的显示器
top_filter_div = document.getElementById( "filter_div").offsetTop;
}

//滚动条的高度 加上 控件自身高度时 小于 控件距离body的高度 则不固定在顶部
if(t + 40 < top_filter_div){
$(filter_div).css({
position:"relative"
});
}else{
//滚动条的高度 加上 控件自身高度时 大于 控件距离body的高度 则固定在顶部
$(filter_div).css({
position:"fixed"
});
}
}

}

$(function(){
filterDivListerner()
});

 

 



 

 

 





大小: 75.4 KB

查看图片附件