当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript 导航栏自动隐藏功能代码教程

JavaScript 导航栏自动隐藏功能代码教程

2018年04月05日  | 移动技术网IT编程  | 我要评论

JavaScript 导航栏自动隐藏

往上滚动显示导航栏，往下滚动隐藏导航栏。

首先你得有个导航栏（滑稽）。。

然后建议把导航栏的CSS设置个transition动画，这样看起来比较流畅，JS代码（某些部分需自行修改）：

//记录滚动条高度，以判断是否隐藏
var lastScrollY = 0;
//绑定滚动事件
window.onscroll = function() { headerScroll(); };
function headerScroll() {
    //这里是获取导航栏元素，自行修改
    var header = document.getElementsByTagName("header")[0];
    //165可自行修改，使其在指定高度内滚动时不隐藏
    if (window.scrollY - lastScrollY > 0 && window.scrollY > 165)
    {
        //往下滚动，隐藏导航栏
        //-70px修改为 -导航栏高度px
        header.style.top = "-70px";
    }
    else if (window.scrollY - lastScrollY < 0)
    {
        //往上滚动，显示导航栏
        header.style.top = "0px";
    }
    lastScrollY = window.scrollY;
}

好了，大概的实现方法就这样了，页面加载时的起伏与iOS Safari拉到最下面反弹的问题你自己看着办吧（滑稽x2）。。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网