js楼层导航

最新推荐文章于 2023-04-27 15:38:07 发布

清酒独酌

最新推荐文章于 2023-04-27 15:38:07 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： javascript css html 前端

本文链接：https://blog.csdn.net/yang68668/article/details/121245424

版权

javascript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        body {
            background-color: #ccc;
        }
        
        .wrap {
            width: 1120px;
            margin: 0 auto;
        }
        /* 固定定位 */
        
        .floor-nav {
            position: fixed;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 120px;
            box-shadow: 0 4px 8px 0 rgb(7 17 27 / 10%);
            border-radius: 0 8px 8px 0;
            background-color: #fff;
        }
        
        .floor-nav li:hover {
            color: #e02020;
        }
        
        .floor-nav li {
            text-align: center;
            padding: 16px 0;
            font-size: 14px;
            color: #6d7278;
            position: relative;
            cursor: pointer;
        }
        /* 边框 */
        
        .floor-nav li:not(li:first-child)::after {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid #f3f5f7;
            top: 0;
            width: 60px;
        }
        /*  新上好课*/
        
        .course {
            height: 800px;
            background-color: seagreen;
        }
        /* 进站必学 */
        
        .learn {
            height: 600px;
            background-color: #3498db;
        }
        /* 学习路线 */
        
        .path {
            height: 800px;
            background-color: #e74c3c;
        }
        /* 慕课专栏 */
        
        .special {
            height: 1000px;
            background-color: #16a085;
        }
        /* 限时拼团 */
        
        .group {
            height: 800px;
            background-color: #34495e;
        }
        /* 头部导航 */
        
        header nav {
            height: 100px;
            background-color: pink;
        }
        
        .floor-nav .active {
            color: #e02020;
        }
    </style>
</head>

<body>
    <!-- 大盒子 -->
    <div class="wrap">
        <!-- 导航部分 -->
        <header>
            <nav></nav>
        </header>
        <!-- 内容部分 -->
        <ul class="content">
            <li class="course">新上好课</li>
            <li class="learn">进站必学</li>
            <li class="path">学习路线</li>
            <li class="special">慕课专栏</li>
            <li class="group">限时拼团</li>
        </ul>
        <!-- 导航条 -->
        <ul class="floor-nav">
            <li class="active">新上好课</li>
            <li>进站必学</li>
            <li>学习路线</li>
            <li>慕课专栏</li>
            <li>限时拼团</li>
        </ul>
    </div>
    <script>
        var news = document.getElementById('new')
        var le = document.getElementById('le')

        /* 获取每一个内容区顶部的距离 */
        var contents = document.querySelectorAll('.content li');
        /* 获取所有的楼层导航 */
        var floors = document.querySelectorAll('.floor-nav li')
            /* 得到的放到新数组 */
        var arr = [];
        /* 遍历每一个li */
        for (i = 0; i < contents.length; i++) {
            /* 通过offsetTop得出每一个距离，然后放入新数组 */
            arr.push(contents[i].offsetTop)
        }
        /* 遍历每一个楼层导航的li */
        for (j = 0; j < floors.length; j++) {
            /* 定义一个自定义变量 */
            floors[j].index = j;
            /* 为楼层导航添加点击事件 */
            floors[j].onclick = function() {
                window.scrollTo({
                    /* 点击一个li滚去 */
                    top: arr[this.index],
                    /* 滚动的过渡 */
                    behavior: 'smooth'
                })
            }
        }
        /* 页面滚动时卷曲的高度 */
        window.onscroll = function() {
            /* 获取卷曲高度 兼容写法*/
            var h = document.documentElement.scrollTop || document.body.scrollTop;
            /* 定义一个变量记录楼层 */
            var index = 0;
            for (var i = 0; i < arr.length; i++) {
                /* 判断位置 */
                if (h + 200 > arr[i]) {
                    index = i
                } else {
                    break;
                }
            }
            /* 遍历 */
            for (var j = 0; j < floors.length; j++) {
                /* 删除上次的状态 */
                floors[j].classList.remove('active')
            }
            /* 添加新的类 */
            floors[index].classList.add('active')
        }
    </script>
</body>

清酒独酌

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js楼层导航

<style> * { margin: 0; padding: 0; } li { list-style-type: none; } body { background-color: #ccc; } .wrap { .
复制链接

扫一扫