美文网首页
JS案例-向下滑动导航栏固定

JS案例-向下滑动导航栏固定

作者: hi__world | 来源:发表于2018-11-28 22:44 被阅读0次

    很简单但很实用的功能。

    效果演示:


    导航栏固定

    源码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0
            }
    
            img {
                vertical-align: top;
            }
    
            .main {
                margin: 0 auto;
                width: 1000px;
                margin-top: 10px;
            }
    
            #Q-nav1 {
                overflow: hidden;
            }
    
            .fixed {
                position: fixed;
                top: 0;
                left: 0;
            }
        </style>
    
        <script>
            window.onload = function () {
                //需求1:当我们滚动界面的时候,被卷曲的头部超过第二个盒子距离顶部的位置,那么直接给第二个盒子加类名.fixed
                //需求2:当我们滚动界面的时候,被卷曲的头部小于第二个盒子距离顶部的位置,那么直接给第二个盒子取消类名.fixed
                //步骤:
                //1.老三步。
                //2.判断 ,被卷曲的头部的大小
                //3.满足条件添加类,否则删除类
                var top=document.getElementById("top");
                var topHeight=top.offsetHeight;
                var nav1=document.getElementById("Q-nav1");
                var main=document.getElementById("main");
    
                window.onscroll=function(){
                   if (scroll().top>topHeight) {
                    nav1.className+=" fixed";
                    top.style.marginBottom=nav1.offsetHeight+"px"
                   } else{
                    nav1.className=""
                    top.style.marginBottom=0+"px"
                   }
                }
    
    
            function scroll() {  // 开始封装自己的scrollTop
        if(window.pageYOffset !== undefined) {  // ie9+ 高版本浏览器
            // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        }
        else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }
        return {   // 未声明 DTD
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    }
    
            }
        </script>
    </head>
    <body>
        <div class="top" id="top">
            <img src="images/top.png" alt=""/>
        </div>
        <div id="Q-nav1">
            <img src="images/nav.png" alt=""/>
        </div>
        <div class="main" id="main">
            <img src="images/main.png" alt=""/>
        </div>
    </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:JS案例-向下滑动导航栏固定

          本文链接:https://www.haomeiwen.com/subject/zcetcqtx.html