固定导航栏

最新推荐文章于 2023-12-07 12:38:47 发布

zuo_zuo_blog

最新推荐文章于 2023-12-07 12:38:47 发布

阅读量2.1k

点赞数 1

分类专栏：ＪａｖａＳｃｒｉｐｔ

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/89540158

版权

ＪａｖａＳｃｒｉｐｔ专栏收录该内容

105 篇文章 2 订阅

订阅专栏

<!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>

    <!--引入工具js-->
    <script src="12-固定导航栏/my.js"></script>
    <script>
        window.onload = function () {
            //需求1：当我们滚动界面的时候，被卷曲的头部超过第二个盒子距离顶部的位置，那么直接给第二个盒子加类名.fixed
            //需求2：当我们滚动界面的时候，被卷曲的头部小于第二个盒子距离顶部的位置，那么直接给第二个盒子取消类名.fixed
            //1.老三步。
            var topDiv = document.getElementById("top");
            var height = topDiv.offsetHeight;
            var middle = document.getElementById("Q-nav1");
            var main = document.getElementById("main");
            window.onscroll = function () {
                //2.判断 ，被卷曲的头部的大小
                if(scroll().top > height){
                    //3.满足条件添加类，否则删除类
                    middle.className += " fixed";
                    //第二个盒子不占位置了，所以我们给第三个盒子一个上padding占位置，不出现盒子抖动问题
                    main.style.paddingTop = middle.offsetHeight+"px";
                }else{
                    middle.className = "";
                    //清零
                    main.style.paddingTop = 0;
                }
            }

        }
    </script>
</head>
<body>
<div class="top" id="top">
    <img src="12-固定导航栏/images/top.png" alt=""/>
</div>
<div id="Q-nav1">
    <img src="12-固定导航栏/images/nav.png" alt=""/>
</div>
<div class="main" id="main">
    <img src="12-固定导航栏/images/main.png" alt=""/>
</div>
</body>
</html>

zuo_zuo_blog

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
固定导航栏

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0...
复制链接

扫一扫

专栏目录