下滚导航条自动隐藏，上滚显示

HTML代码（body内）

<div class="top" id="top"></div>
<div class="nav" id="nav"></div>
<div class="main-body" id="menu">
    <img src="images/img1.jpg" alt=""> 　　<--随便一张img1.jpg-->
</div>
<div class="footer"></div>

CSS样式

body{
    background: pink;
    margin:0px;
    padding:0px;
}
.top{
    width:100%;
    height:80px;
    background:#ccc;
}
.nav{
    width:100%;
    height:40px;
    background:cornflowerblue;
}
.main-body{
    height:1600px;
}
.footer{
    width:100%;
    height:120px;
    background:pink;
}

.navfix{
    position:fixed;
    top:0px;
}

JavaScript代码

<script type="text/javascript">
    /*页面滚动事件*/
    window.onscroll = function () {
        if(document.documentElement.scrollTop >= document.getElementById('top').offsetHeight ){
            document.getElementById('nav').className = 'nav navfix'
            document.getElementById('menu').style.marginTop="40px"
        }else{
            document.getElementById('nav').className = 'nav'
            document.getElementById('menu').style.marginTop="0px"
        }
    }
    //==============================================
    //document.documentElement.scrollTop　　　　　　　　滚动条移动的距离
    //document.getElementById('top').offsetHeight　　导航上面top的高度。offsetHeight获取,知道固定高度的可以直接用数值代替

    //document.getElementById('nav').className = 'nav navfix'　　　　.className= ，给选定的元素添加css样式
    //document.getElementById('nav').className = 'nav'　
    //document.getElementById('main-body').style.marginTop="40px"　　40为nav的高度，为了解决bug，也可以设置为


    //其中.nav{ width:100%; height:40px; background:blue;}
    //.navifx{ position：fixed; top:0px; }
</script>

优质内容筛选与推荐>>
1、C#后台架构师成长之路-高阶知识体系核心
2、CSS规范 - 典型错误--（来自网易）
3、HTTPS的误解(二)
4、FLEX 4(Gumbo)教程之按钮(二) 大 | 中 | 小
5、python 加密解密签名验证签名公钥私钥非对称加密 RSA

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看