楼层导航的几种写法

最新推荐文章于 2022-09-09 22:11:12 发布

┌;崛起`灬°

最新推荐文章于 2022-09-09 22:11:12 发布

阅读量387

点赞数

本文链接：https://blog.csdn.net/weixin_53125457/article/details/115958260

版权

第一种：通过索引值实现

<!-- <!DOCTYPE html> -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #f2f2f2;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        .container {
            width: 1230px;
            /* height: 500px; */
            margin: 0 auto;
            /* background-color: red; */
        }
        
        .navbar {
            /* width: 36px; */
            /* height: 500px; */
            background-color: #666;
            position: fixed;
            top: 400px;
            left: 50%;
            margin-left: -655px;
            text-align: center;
            font-size: 12px;
            color: #fff;
        }
        
        .navbar li {
            width: 30px;
            padding: 3px;
            border-bottom: 1px solid #fff;
        }
        
        .navbar .navtab,
        .navbar .totop {
            padding: 10px 3px;
        }
        
        .navbar .navtab {
            border-bottom: 1px solid #fff;
            background-color: #ff0036;
        }
        
        .navbar .totop {
            background-color: #999;
        }
        
        .content {
            height: 800px;
            margin-bottom: 20px;
        }
        
        .content:nth-child(1) {
            background-color: orange;
        }
        
        .content:nth-child(2) {
            background-color: pink;
        }
        
        .content:nth-child(3) {
            background-color: skyblue;
        }
        
        .content:nth-child(4) {
            background-color: yellowgreen;
        }
        
        .content:nth-child(5) {
            background-color: purple;
        }
        
        .content:nth-child(6) {
            background-color: teal;
        }
        
        .content:nth-child(7) {
            background-color: green;
        }
        
        .content:nth-child(8) {
            background-color: gray;
        }
        
        .box {
            height: 1000px;
        }
        
        .active {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="container">
        <div class="content">天猫超市</div>
        <div class="content">天猫国际</div>
        <div class="content">打造爱巢</div>
        <div class="content">居家生活</div>
        <div class="content">户外出行</div>
        <div class="content">美丽人生</div>
        <div class="content">潮店酷玩</div>
        <div class="content">猜你喜欢</div>
    </div>

    <div class="navbar">
        <div class="navtab">导航</div>
        <ul class="list">
            <li>天猫超市</li>
            <li>天猫国际</li>
            <li>打造爱巢</li>
            <li>居家生活</li>
            <li>户外出行</li>
            <li>美丽人生</li>
            <li>潮店酷玩</li>
            <li>猜你喜欢</li>
        </ul>
        <div class="totop">顶部</div>
    </div>
    <div class="box"></div>

    <script>
        //  获取DOM 对象
        let cont = document.querySelectorAll('.content')
        let nav = document.querySelectorAll('.list li')
            //  统一处理内容距离页面顶部的偏移值
        let arrOffsetTop = []
        cont.forEach(item => {
            arrOffsetTop.push(item.offsetTop)
        })
        console.log(arrOffsetTop);

        let currentIndex = 0; // 当前出现在视野区域的元素的索引值
        //  滚动事件
        window.onscroll = function() {
            //  获取滚动值  原生js的获取页面滚动值的兼容性处理
            //  document.documentElement.scrollTop 标准模式
            // document.body.scrollTop 没有DOCTYPE 声明的时候处理
            //  window.pageYOffset  safari浏览器
            let sctop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
                // console.log(sctop);
                //  判断内容的偏移值和滚动值的关系
            arrOffsetTop.forEach((item, index) => {
                if (item - sctop <= 200 && item >= sctop) {
                    currentIndex = index;
                    // console.log(index); 
                    //  给当前出现在视野区域的内容对应的导航添加高亮显示 ， 其他的都需要清除
                    nav.forEach(item => {
                        item.classList.remove('active')
                    })
                    nav[index].classList.add('active')
                }
            })
        }

        //  绑定单击事件
        nav.forEach((item, index) => {
            item.onclick = function() {
                nav.forEach(item => {
                    item.classList.remove('active')
                })
                this.classList.add('active')
                    // console.log(index);
                    //  直到型：没有动画
                    //  获取对应内容的偏移值， 然后把偏移赋值给页面的滚动值
                let oftop = cont[index].offsetTop;

                let sctop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
                    //  设置动画版 使用计时器 
                let timer = setInterval(() => {
                    //  判断 向上滚动还是向下滚动
                    if (index > currentIndex) {
                        //  向下滚动页面
                        //  当前的滚动值
                        // let sctop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
                        //  点击的对应内容的偏移值  和滚动值的关系 设置移动速度
                        sctop += 90;

                    } else if (index < currentIndex) {
                        //  向上滚动页面
                        // let sctop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
                        //  点击的对应内容的偏移值  和滚动值的关系 设置移动速度
                        sctop -= 90;
                    } else {
                        clearInterval(timer)
                        sctop = oftop

                        //  反复点击当前导航
                    }
                    document.documentElement.scrollTop = sctop
                    document.body.scrollTop = sctop;
                    window.pageYOffset = sctop;

                }, 16.7)
            }
        })
    </script>
</body>

</html>

第二种：通过比较页面滚动的值与内容的值实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #f2f2f2;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        .container {
            width: 1230px;
            margin: 0 auto;
        }
        
        .navbar {
            background-color: #666;
            position: fixed;
            top: 400px;
            left: 50%;
            margin-left: -655px;
            text-align: center;
            font-size: 12px;
            color: #fff;
        }
        
        .navbar li {
            width: 30px;
            padding: 3px;
            border-bottom: 1px solid #fff;
        }
        
        .navbar .navtab,
        .navbar .totop {
            padding: 10px 3px;
        }
        
        .navbar .navtab {
            border-bottom: 1px solid #fff;
            background-color: #ff0036;
        }
        
        .navbar .totop {
            background-color: #999;
        }
        
        .content {
            height: 800px;
            margin-bottom: 20px;
        }
        
        .content:nth-child(1) {
            background-color: orange;
        }
        
        .content:nth-child(2) {
            background-color: pink;
        }
        
        .content:nth-child(3) {
            background-color: skyblue;
        }
        
        .content:nth-child(4) {
            background-color: yellowgreen;
        }
        
        .content:nth-child(5) {
            background-color: purple;
        }
        
        .content:nth-child(6) {
            background-color: teal;
        }
        
        .content:nth-child(7) {
            background-color: green;
        }
        
        .content:nth-child(8) {
            background-color: gray;
        }
        
        .box {
            height: 1000px;
        }
        
        .active {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="container">
        <div class="content">天猫超市</div>
        <div class="content">天猫国际</div>
        <div class="content">打造爱巢</div>
        <div class="content">居家生活</div>
        <div class="content">户外出行</div>
        <div class="content">美丽人生</div>
        <div class="content">潮店酷玩</div>
        <div class="content">猜你喜欢</div>
    </div>

    <div class="navbar">
        <div class="navtab">导航</div>
        <ul class="list">
            <li>天猫超市</li>
            <li>天猫国际</li>
            <li>打造爱巢</li>
            <li>居家生活</li>
            <li>户外出行</li>
            <li>美丽人生</li>
            <li>潮店酷玩</li>
            <li>猜你喜欢</li>
        </ul>
        <div class="totop">顶部</div>
    </div>
    <div class="box"></div>

    <script>
        //  获取DOM 对象
        let cont = document.querySelectorAll('.content')
        let nav = document.querySelectorAll('.list li')
            //  统一处理内容距离页面顶部的偏移值
        let arrOffsetTop = []
        cont.forEach(item => {
            arrOffsetTop.push(item.offsetTop)
        })
        console.log(arrOffsetTop);

        let currentIndex = 0; // 当前出现在视野区域的元素的索引值
        let timer = null;
        //  滚动事件
        window.onscroll = function() {
            //  获取滚动值  原生js的获取页面滚动值的兼容性处理
            //  document.documentElement.scrollTop 标准模式
            // document.body.scrollTop 没有DOCTYPE 声明的时候处理
            //  window.pageYOffset  safari浏览器
            let sctop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
                // console.log(sctop);
                //  判断内容的偏移值和滚动值的关系
            arrOffsetTop.forEach((item, index) => {
                if (item - sctop <= 200 && item >= sctop) {
                    currentIndex = index;
                    // console.log(index); 
                    //  给当前出现在视野区域的内容对应的导航添加高亮显示 ， 其他的都需要清除
                    nav.forEach(item => {
                        item.classList.remove('active')
                    })
                    nav[index].classList.add('active')
                }
            })
        }

        //  绑定单击事件
        nav.forEach((item, index) => {
            item.onclick = function() {
                nav.forEach(item => {
                    item.classList.remove('active')
                })
                this.classList.add('active')
                    // console.log(index);
                    //  直到型：没有动画
                    //  获取对应内容的偏移值， 然后把偏移赋值给页面的滚动值
                let oftop = cont[index].offsetTop;
                // document.documentElement.scrollTop = oftop
                // document.body.scrollTop = oftop;
                // window.pageYOffset = oftop;
                //  获取当前的滚动值
                let sctop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
                    //  设置动画版 使用计时器 
                timer = setInterval(() => {
                    //  判断偏移值和滚动的关系 
                    if (oftop > sctop) {
                        sctop += 90;
                        if (sctop > oftop) {
                            clearInterval(timer)
                            sctop = oftop;
                        }
                    } else if (oftop < sctop) {
                        sctop -= 90;
                        if (sctop < oftop) {
                            clearInterval(timer)
                            sctop = oftop;
                        }
                    } else {
                        sctop = oftop;
                        clearInterval(timer)
                    }
                    document.documentElement.scrollTop = sctop
                    document.body.scrollTop = sctop;
                    window.pageYOffset = sctop;
                }, 16.7)
            }
        })
    </script>
</body>

</html>

第三种：通过jqurey实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f2f2f2;
        }

        ul,
        li {
            list-style: none;
        }

        .container {
            width: 1230px;
            /* height: 500px; */
            margin: 0 auto;
            /* background-color: red; */
        }

        .navbar {
            width: 0px;
            height: 0px;
            overflow: hidden;
            background-color: #666;
            position: fixed;
            bottom: 200px;
            left: 50%;
            margin-left: -655px;
            text-align: center;
            font-size: 12px;
            color: #fff;
            transition: all .2s;
            /* display: none; */
        }

        .navbar li {
            width: 30px;
            padding: 3px;
            border-bottom: 1px solid #fff;
        }

        .navbar .navtab,
        .navbar .totop {
            padding: 10px 3px;
        }

        .navbar .navtab {
            border-bottom: 1px solid #fff;
            background-color: #ff0036;
        }

        .navbar .totop {
            background-color: #999;
        }

        .content {
            height: 800px;
            margin-bottom: 20px;
        }

        .content:nth-child(1) {
            background-color: orange;
        }

        .content:nth-child(2) {
            background-color: pink;
        }

        .content:nth-child(3) {
            background-color: skyblue;
        }

        .content:nth-child(4) {
            background-color: yellowgreen;
        }

        .content:nth-child(5) {
            background-color: purple;
        }

        .content:nth-child(6) {
            background-color: teal;
        }

        .content:nth-child(7) {
            background-color: green;
        }

        .content:nth-child(8) {
            background-color: gray;
        }

        .box {
            height: 1000px;
        }

        .active {
            background-color: red;
        }
        .header{
            width: 100%;
            height: 80px;
            background-color: red;
            position: fixed;
            top:-90px;
            left:0;
            transition: all .5s;
        }
        
    </style>
</head>

<body>
    <div class="box"></div>
    <!--  头部 -->
    <div class="header"></div>
    <div class="container">
        <div class="content">天猫超市</div>
        <div class="content">天猫国际</div>
        <div class="content">打造爱巢</div>
        <div class="content">居家生活</div>
        <div class="content">户外出行</div>
        <div class="content">美丽人生</div>
        <div class="content">潮店酷玩</div>
        <div class="content">猜你喜欢</div>
    </div>

    <div class="navbar">
        <div class="navtab">导航</div>
        <ul class="list">
            <li>天猫超市</li>
            <li>天猫国际</li>
            <li>打造爱巢</li>
            <li>居家生活</li>
            <li>户外出行</li>
            <li>美丽人生</li>
            <li>潮店酷玩</li>
            <li>猜你喜欢</li>
        </ul>
        <div class="totop">顶部</div>
    </div>
    <div class="box"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <script>
        //  提前获取元素的偏移值
        let arr = [];
        $('.content').each(function (index, item) {
            arr.push($(item).offset().top)
        })

        console.log(arr);

        //  绑定滚动事件
        $(window).on('scroll', function () {
            // 获取滚动值
            let sctop = $(window).scrollTop();
            console.log(sctop);
            
            //  判断头部内容出现
            if(sctop >= 600){         
               $('.header').css({top: 0})
                $('.navbar').css({width: 36, height: 385})
            }else{
                $('.header').css({top: -90})
                $('.navbar').css({width: 0, height: 0})
            }


            //  判断 进入视野区域的元素对应的索引值
            arr.forEach((item, index) => {
                if (item - sctop <= 200 && item >= sctop) {
                    $('.list li').eq(index).addClass('active').siblings().removeClass('active')
                }
            })
        })

        //  绑定点击事件
        $('.list li').on('click', function(){
            let oftop = $('.content').eq($(this).index()).offset().top;
            // console.log(oftop);
            //  设置页面滚动  使用$('html,body') 实现页面的滚动。而不是$(window)
            $('html, body').animate({scrollTop: oftop - 100}, 300)
        })
    </script>
</body>

</html>