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。