【浮动导航栏的定位】JS监听动态页面元素距离底部距离,并修改定位样式

需求:一个定位position:fixed;的菜单栏,移动到底部时依然存在,影响页面美观,我们希望当滚轮移到页面末尾时菜单栏更换为绝对定位。
解决:JS没有直接获取元素距离页面底部距离的函数,因此可利用全文高度-当前高度取得差值来间接判断。



    
        
        
            
        
    
    
        


    

效果:

【浮动导航栏的定位】JS监听动态页面元素距离底部距离,并修改定位样式_第1张图片

滚动条到达一定高度后更换class,实现不再绝对定位。

【浮动导航栏的定位】JS监听动态页面元素距离底部距离,并修改定位样式_第2张图片

你可能感兴趣的:(web前端基础)