一个类似于微信导航的导航栏
需求:页面向上滑动/滚动时,底部导航消失;
页面向下滑动/滚动时,底部导航显示;
页面滑动/滚动到最底部时,导航展示
在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。