tab导航条在 滑动滚动 过程中的隐藏与展示，滑动滚动 到页面最底部时展示

     一个类似于微信导航的导航栏      需求：页面向上滑动/滚动时，底部导航消失；                 页面向下滑动/滚动时，底部导航显示；

                页面滑动/滚动到最底部时，导航展示  

      在https://www.cnblogs.com/theWayToAce/p/7144477.html 这篇文章中找到的方法经过测试以后可用。  

// tab滑动效果 var isStopScroolTimer=null; var topValue=null; //获取滚动高度 function getScrollTop() { var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if(document.body) { scrollTop = document.body.scrollTop; }else{ scrollTop = window.pageYOffset } if(scrollTop < 0){ scrollTop = 0; } return scrollTop; } function getScrollHeight(){ var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0; if(document.body){ bodyScrollHeight = document.body.scrollHeight; } if(document.documentElement){ documentScrollHeight = document.documentElement.scrollHeight; } scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight; return scrollHeight; } //浏览器视口的高度 function getWindowHeight(){ var windowHeight = 0; if(document.compatMode == "CSS1Compat"){ windowHeight = document.documentElement.clientHeight; }else{ windowHeight = document.body.clientHeight; } return windowHeight; } window.onscroll=function(){ if(isStopScroolTimer == null) { isStopScroolTimer = setInterval("isStopScrool()", 100); } }; function isStopScrool() { // 判断此刻到顶部的距离是否和1秒前的距离相等 if(getScrollTop() == topValue) { // console.log('滑动结束'+'滑动高度：'+getScrollTop()); clearInterval(isStopScroolTimer); isStopScroolTimer=null; } else if(getScrollTop() > topValue){ $(".tabBar").addClass("height"); //隐藏导航 if(getScrollTop() + getWindowHeight() == getScrollHeight()){ // alert("已经到最底部了！!"); $(".tabBar").removeClass("height"); //隐藏导航 } // console.log("向上滚动"); topValue = getScrollTop(); }else if(getScrollTop() < topValue){ $(".tabBar").removeClass("height"); //显示导航 // console.log("向下滚动"); topValue = getScrollTop(); }else{ topValue = getScrollTop(); } }

需要注意的地方：

     ①为了实现滑到最底部，展示tab，在另一篇文章中找到方法，加入【浏览器视口的高度】这一段，并且在isStopScroll方法中加了到达最底部的判断，效果实现。      ②代码完成后，经过测试发现一个问题，安卓机上效果完美，iOS上划到最顶部的时候，tab导航消失了，懵圈，后来在不断百度中得知iOS有默认的弹性滚动（https://www.cnblogs.com/muzhifeike/p/5871180.html），此时可能需要对这个进行处理，遂在getScrollTop方法中加入了判断scrollTop<0时，使它的值=0。       然后。。。。。。就好使了。       其中的class——height，是将height设为0px，也可以给导航加一个transition:height 0.2s;，滑动效果更舒适。目前测试阶段未发现什么问题，分享一下，使用过程中有任何兼容、性能问题，欢迎及时留言，探讨，over。