侧边栏壁纸
  • 累计撰写 10 篇文章
  • 累计创建 8 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

电梯导航Demo

云大北
2023-12-13 / 0 评论 / 0 点赞 / 120 阅读 / 0 字
温馨提示:
本文最后更新于2024-07-04,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

业务需求需要实现一个电梯导航,也叫单页导航.主要实现的效果是滚动到对应位置后右侧进行高亮展示当前对应位置,点击的原理为锚链接跳转,滚动是通过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>

评论区