楼层导航代码

最新推荐文章于 2023-02-13 15:27:18 发布

๓°恰巧এ⁵²º᭄

最新推荐文章于 2023-02-13 15:27:18 发布

阅读量232

点赞数

分类专栏：案例楼层导航

本文链接：https://blog.csdn.net/qq_47928302/article/details/122772753

版权

HTML CSS JavaScript 响应式设计滚动监听

关键词由CSDN通过智能技术生成

案例同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

楼层导航

1 篇文章 0 订阅

订阅专栏

HTML代码：

    <div class="header"></div>
    <div class="banner"></div>
    <div class="main1 main">男装</div>
    <div class="main2 main">童装</div>
    <div class="main3 main">女装</div>
    <div class="main4 main">鞋靴</div>

    <div class="sit-nav">
        <div class="bar bar1">男装</div>
        <div class="bar bar2">童装</div>
        <div class="bar bar3">女装</div>
        <div class="bar bar4">鞋靴</div>
    </div>

CSS代码：

        * {
            margin: 0px;
            padding: 0px;
        }
        
        .header {
            width: 100%;
            height: 80px;
            background-color: black;
        }
        
        .banner {
            width: 1200px;
            height: 600px;
            margin: 0px auto;
            background-color: skyblue;
        }
        
        .box {
            width: 1200px;
            margin: 0 auto;
            position: relative;
        }
        
        .main1,
        .main2,
        .main3,
        .main4 {
            width: 100%;
            height: 1000px;
            margin: auto;
            text-align: center;
            line-height: 1000px;
            font-size: 100px;
        }
        
        .main1 {
            background-color: orange;
        }
        
        .main2 {
            background-color: pink;
        }
        
        .main3 {
            background-color: purple;
        }
        
        .main4 {
            background-color: springgreen;
        }
        
        .sit-nav {
            width: 408px;
            height: 50px;
            position: fixed;
            top: 0px;
            left: 0px;
            display: none;
        }
        
        .sit-nav .bar {
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            float: left;
        }

Script代码：

<script>
        var main1 = document.getElementsByClassName("main1")[0];
        var main2 = document.getElementsByClassName("main2")[0];
        var main = document.getElementsByClassName("main");
        var bar = document.getElementsByClassName("bar");
        var sit_nav = document.getElementsByClassName("sit-nav")[0];
        // 排他
        function sibling(ele) {
            for (var i = 0; i < ele.length; i++) {
                ele[i].style.backgroundColor = "white";
                ele[i].style.color = "black";
            }
        }
        window.onscroll = function() {
            console.log(window.pageYOffset);
            //main1的偏移量小于等于页面滚动的距离 并且 main2偏移量大于等于页面滚动的距离
            if (window.pageYOffset >= main1.offsetTop && window.pageYOffset <= main2.offsetTop) {
                sit_nav.style.display = "block";
            } else if (window.pageYOffset < main1.offsetTop) {
                sit_nav.style.display = "none";
            }

            for (var i = 0; i < main.length; i++) {
                if (window.pageYOffset >= main[i].offsetTop) {
                    //其作用是筛选给定的同胞同类元素（不包括给定元素本身）
                    sibling(bar)
                    bar[i].style.backgroundColor = "deepskyblue";
                    bar[i].style.color = "white";
                }
            }
        }
    </script>