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

【经验分享】滚动浮动导航,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

要回复文章请先登录注册

五叶神

五叶神 (作者)

回复 a***@163.com :
自定义操作Class的方法,看补充
2016-12-26 14:47
五叶神

五叶神 (作者)

回复 5***@qq.com :
自定义操作Class的方法,看不补充
2016-12-26 14:46
五叶神

五叶神 (作者)

回复 5***@qq.com :
自定义操作Class的方法
2016-12-26 14:27
五叶神

五叶神 (作者)

himall是我自己写的一个方法啊,就是用的jquery的hasClass removeClass方法,自己封装一个或者用其他方法也行,需要的话补充一下吧
2016-12-26 14:26
五叶神

五叶神 (作者)

回复 a***@163.com :
himall是我自己写的一个方法啊,类似jquery的hasClass removeClass方法
2016-12-26 14:24
a***@163.com

a***@163.com

遇到和你一样的情况,请问himall是什么,能帮忙解答吗?
2016-12-15 23:08
飘叶

飘叶

himall 是什么意思啊
2016-12-02 15:47
5***@qq.com

5***@qq.com

himall 是什么···
2016-11-25 09:35
柒哥

柒哥

回复 五叶神 :
好的,谢啦
2016-11-15 11:06
五叶神

五叶神 (作者)

回复 柒哥 :
html都附上了,没有更多了
2016-11-15 11:03