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

工作需求 —— 首页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()
    });

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

相关推荐