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


    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{ 100%; height:40px; background:blue;}
        //.navifx{ position:fixed; top:0px; }
    </script>
  • 相关阅读:
    宽带手记
    adb的logcat使用
    项目经理
    小A老空调需求管理小记
    作为一个项目经理你关注的是什么
    技术采撷
    项目的落地目标
    和我一起使用postcss+gulp进行vw单位的移动端的适配
    高级程序设计第十三章,简单的事件捕获事件冒泡整理
    javascript高级程序设计第二章知识点提炼
  • 原文地址:https://www.cnblogs.com/seeding/p/11856866.html
Copyright © 2020-2023  润新知