孙肖宁

固定顶部的导航栏
描述:当用户滑动离开当前的版面的时候,顶部的banner会自动隐藏,顶部的导航栏固定,当用户返回过来的时候,顶部的...
扫描右侧二维码阅读全文
15
2018/04

固定顶部的导航栏

描述:当用户滑动离开当前的版面的时候,顶部的banner会自动隐藏,顶部的导航栏固定,当用户返回过来的时候,顶部的导航栏取消固定,顶部的banner也会恢复过来。用户在使用的时候,把呢日荣换成自己的就行,我在这里引用的图片进行的占位。
实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <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 () {
            var topDiv = document.getElementById("top");
            var height = topDiv.offsetHeight;
            var middle = document.getElementById("Q-nav1");
            var main = document.getElementById("main");
            window.onscroll = function () {
                    if(scroll().top>height){
                        middle.className = "fixed";
                        main.style.paddingTop = middle.offsetHeight+"px";
                    }else {
                        middle.className = "";
                        main.style.paddingTop=0;
                    }
            }
        }
        function scroll(){
            return {
                "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
                "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
            }
        }
    </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>
Last modification:April 15th, 2018 at 08:07 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment