前端开发之js基础(9)

固定导航栏层

1.css代码

<style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            img{
                vertical-align: top;
            }
            .main{
                 margin: 0 auto;
                 width: 1000px;
                 margin-top: 10px;
            }
            .top{
                margin: 0 auto;
            }
            .top img{
                width: 100%;
            }

            #Q-nav1{
                overflow: hidden;
            }
            #Q-nav1 img{
                width: 100%;
            }
            .fixed{
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
            }
        </style>

2.html代码

<body>
        <div class="top" id="top">
            <img src="../images/fixdnav/top.png"/>
        </div>
        <div id="Q-nav1">
            <img src="../images/fixdnav/nav.png" alt="" />
        </div>
        <div id="main" class="main">
            <img src="../images/fixdnav/main.png"/>
        </div>
    </body>

3.js代码

    <script type="text/javascript">
        //加载
        window.onload = function(){
            //当我们滚动界面的时候，被卷曲的头部超过第二个盒子距离的顶部位置，那么直接给第二个盒子加上fixed类
            //当我们滚动界面的时候，被卷曲的头部小于第二个盒子距离的顶部位置，那么直接给第二个盒子取消fixed类
            var top = document.getElementById("top");
            var height = top.offsetHeight;
            var middle = document.getElementById("Q-nav1");
            var main = document.getElementById("main");
            //滚动事件
            window.onscroll = function(){
                //判断被卷头部的大小
                if(scroll().top>height){
                    middle.className = "fixed";
                    //第二个盒子不占位置了，所以给第三个盒子上一个padding占位置，不会出现盒子抖动问题
                    main.style.paddingTop = middle.offsetHeight+"px";

                }else{
                    middle.className = "";
                    main.style.paddingTop = 0;
                }
            }
        }
        //封装scrolltop
        function scroll(){
            if(window.pageYOffset!== undefined){
                return {
                    left:window.pageXOffset,
                    top:window.pageYOffset
                }
            }
        }

    </script>

前端开发之js基础(9)

固定导航栏层

猜你喜欢