五叶神
五叶神
  • 发布:2016-11-15 10:45
  • 更新:2016-11-15 10:45
  • 阅读:8879

【经验分享】滚动浮动导航,iscroll结构滚动固定元素

分类:MUI

看问答里面很多人在求滚动到一定位置固定某个结构的方法,分享个简单的方法。

官方给的iscroll获取滚动条高度的在浏览器是有效的,在安卓手机上就无效了,获取transform transitionY同样的问题获取不到,所以放弃获取高度,直接通过固定目标元素距离顶部的距离去判断位置。

// 滚动固定  
            var headH = document.querySelector('header').offsetHeight,  //头部高度  
                tab = document.getElementById('userTab'),   //目标元素  
                fixed = document.getElementById('fixedNav'); // 浮动元素,默认隐藏,当然也可以直接浮动目标元素  

            window.addEventListener('scroll', function(e) {  
                //原理:滚动时判断固定元素的top距离头部的位置  
                if(himall.hasClass(fixed, 'hidden')) {  
                    if(tab.getBoundingClientRect().top <= headH) {  
                        himall.removeClass(fixed, ' hidden');  
                    }  
                }else if(!himall.hasClass(fixed, 'hidden')){  
                    if(tab.getBoundingClientRect().top >= headH){  
                        fixed.className += ' hidden';  
                    }  
                }  
            });
himall.removeClass = function(el,name) {  
        if(!el)  
            return;  
        if(el.className.indexOf(name)>=0)  
            el.className=el.className.replace(name,'');  
    }  

    himall.hasClass = function(el,name) {  
        return (el.className.indexOf(name)>=0);  
    }
2 关注 分享
BoredApe 1***@qq.com

要回复文章请先登录注册

柒哥

柒哥

能提供一个完整的demo吗?这几行代码看的不是很明白
2016-11-15 10:57