JavaScript - WebAPI - 滚动家族 - scroll家族 - 案例 - 固定导航栏

最新推荐文章于 2022-04-22 09:01:52 发布

Henry_ww

最新推荐文章于 2022-04-22 09:01:52 发布

阅读量105

点赞数

分类专栏：案例

本文链接：https://blog.csdn.net/Henry_ID/article/details/119700203

版权

案例专栏收录该内容

34 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>滚动家族 - 固定导航栏</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            /* .top {
                height: 168px;
            } */

            img {
                vertical-align: top;
            }

            .main {
                margin: 0 auto;
                width: 1000px;
                margin-top: 10px;
            }

            .fixed {
                position: fixed;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="top" id="topPart">
            <img id="pic" src="images/top.png" alt="" />
        </div>

        <div class="nav" id="navBar">
            <img src="images/nav.png" alt="" />
        </div>

        <div class="main" id="mainPart">
            <img src="images/main.png" alt="" />
        </div>
    </body>
    <script>
        // 需求:页面滚动到一定高度后,导航栏固定住;否则不固定

        // 分析:滚动的距离是顶部栏的高度

        // 获取相关样式
        const navBar = document.querySelector("#navBar");
        const main = document.querySelector("#mainPart");

        console.log(navBar, main);

        // 页面滚动事件
        window.onscroll = function () {
            // 判定当前高度与 顶部栏的高度差
            const toHeight = document.querySelector("#topPart").offsetHeight;

            if (pageYOffset > toHeight) {
                // 固定
                navBar.classList.add("fixed");

                // 固定脱标:下面的内容会顶上去:修改元素的marginTop
                main.style.marginTop = 10 + navBar.offsetHeight + "px";
            } else {
                // 不固定
                navBar.classList.remove("fixed");

                // 回到原始状态
                main.style.marginTop = 10 + "px";
            }
        };
    </script>
</html>

Henry_ww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - WebAPI - 滚动家族 - scroll家族 - 案例 - 固定导航栏

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt
复制链接

扫一扫