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

工作需求 —— 首页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

• 查看图片附件