电梯导航Demo-前端路漫漫

业务需求需要实现一个电梯导航,也叫单页导航.主要实现的效果是滚动到对应位置后右侧进行高亮展示当前对应位置,点击的原理为锚链接跳转,滚动是通过js检测滚动高度去添加动态的类,需要引入jQuery,效果如下:
电梯导航.gif
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电梯导航Demo</title>
    <style>
        html {
            scroll-behavior: smooth;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            background-color: aqua;
        }

        .box2 {
            background-color: chartreuse;
        }

        .box3 {
            background-color: rgb(129, 23, 190);
        }

        .box4 {
            background-color: rgb(224, 112, 6);
        }

        .box5 {
            background-color: rgb(212, 30, 136);
        }

        .box1,
        .box2,
        .box3,
        .box4,
        .box5 {
            height: 100vh;
        }

        .ElevatorNavigation {
            position: fixed;
            right: 20px;
            top: 40%;
        }

        li {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition-duration: .3s;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
            background-color: rgb(52, 93, 204);
            margin: 5px 0;
        }

        .text {
            position: absolute;
            right: 0%;
            width: 0%;
            opacity: 0;
            color: rgb(255, 255, 255);
            font-size: 1.2em;
            font-weight: 600;
            transition-duration: .3s;
        }

        .ElevatorNavigation ul {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: flex-end;
        }

        .ElevatorNavigationBtn:hover {
            width: 100px;
            border-radius: 40px;
            transition-duration: .3s;

        }

        .ElevatorNavigationBtn:hover .text {
            opacity: 1;
            width: 70%;
            transition-duration: .3s;
            padding-right: 10px;
        }

        .ElevatorNavigationBtn:active {
            transform: translate(2px, 2px);
        }

        .ElevatorNavigationBtn a {
            height: 60%;
            width: 100%;
        }

        .active {
            width: 100px;
            border-radius: 40px;
            transition-duration: .3s;
        }

        .active .text {
            opacity: 1;
            width: 70%;
            transition-duration: .3s;
            padding-right: 10px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>

<body>

    <div class="main">
        <div class="box1" id="box1"></div>
        <div class="box2" id="box2"></div>
        <div class="box3" id="box3"></div>
        <div class="box4" id="box4"></div>
        <div class="box5" id="box5"></div>
    </div>
    <div class="ElevatorNavigation">
        <ul>
            <li class="ElevatorNavigationBtn active">
                <a href="#box1">
                    <div class="text">nav1</div>
                </a>
            </li>
            <li class="ElevatorNavigationBtn">
                <a href="#box2">
                    <div class="text">nav2</div>
                </a>
            </li>
            <li class="ElevatorNavigationBtn">
                <a href="#box3">
                    <div class="text">nav3</div>
                </a>
            </li>
            <li class="ElevatorNavigationBtn">
                <a href="#box4">
                    <div class="text">nav4</div>
                </a>
            </li>
            <li class="ElevatorNavigationBtn">
                <a href="#box5">
                    <div class="text">nav5</div>
                </a>
            </li>

        </ul>
    </div>
    <script>
        $(document).ready(function () {
            var isClickEvent = false;

            // 绑定点击事件到导航按钮
            $('.ElevatorNavigation li').click(function () {
                isClickEvent = true;

                var index = $(this).index();
                var targetDiv = $('.main > div').eq(index);
                var scrollTarget = targetDiv.offset().top;

                $('.ElevatorNavigation li').removeClass('active');
                $(this).addClass('active');

                window.setTimeout(function () {
                    $('html, body').scrollTop(scrollTarget);
                    // 延迟重置标志，以确保滚动事件不被触发
                    window.setTimeout(function () {
                        isClickEvent = false;
                    }, 1000); // 延迟时间应根据实际滚动时间进行调整
                }, 0);
            });

            // 监听滚动事件
            $(window).scroll(function () {
                if (isClickEvent) {
                    // 如果是点击事件触发的滚动，跳过以下代码
                    return;
                }

                var scrollPos = $(window).scrollTop();
                $('.main > div').each(function (index) {
                    if (scrollPos >= $(this).position().top && scrollPos < $(this).position().top + $(this).height()) {
                        $('.ElevatorNavigation li').removeClass('active').eq(index).addClass('active');
                    }
                });
            });
        });


    </script>
</body>

</html>
目录CONTENT

电梯导航Demo

评论区
