电梯式导航

最新推荐文章于 2022-09-15 16:24:10 发布

M24女孩不秃头喔！

最新推荐文章于 2022-09-15 16:24:10 发布

阅读量63

点赞数

分类专栏： jquery 文章标签： jQuery 滚动事件导航栏返回顶部页面交互

本文链接：https://blog.csdn.net/qq_57401304/article/details/117635182

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sel1 {
            float: left;
        }

        .sel1 li {
            width: 500px;
            height: 500px;
            list-style: none;
            margin-bottom: 10px;
        }

        .blu {
            background-color: blue;
        }

        .red {
            background-color: red;
        }

        .gree {
            background-color: green;
        }

        .yel {
            background-color: yellow;
        }

        .viol {
            background-color: violet;
        }

        .whit {
            background-color: orange;
        }

        .sno {
            background-color: pink;
        }

        .bla {
            background-color: black;
        }

        .sel2 {
            /* float: right; */
            position: fixed;
            right: 20px;
            top: 240px;
            display: none;
        }

        .sel2 li {
            text-align: center;
            list-style: none;
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid black;
            background-color: #ccc;
        }

        .back {
            position: fixed;
            width: 100px;
            height: 100px;
            right: 15px;
            bottom: 10px;
            text-align: center;
            line-height: 100px;
            background-color: coral;
            display: none;
        }

        .bj {
            background-color: coral !important;
        }

        .current {
            background-color: red !important;
        }
    </style>
    <script src="jquery/js/jquery-2.0.0.min.js"></script>
    <script>
        $(function () {
            // 节流阀
            var flag = true;
            // 当他滚动到第四个盒子的地方，back就显示出来
            var boxTop = $(".yel").offset().top;
            // alert(boxTop)
            // 当页面发生滚动事件时
            $(window).scroll(function () {
                // 判断滚动的距离，到了第四个的位置就触发事件
                if ($(document).scrollTop() >= boxTop) {
                    // 触发的事件是back显示出来
                    $(".back").fadeIn();
                    $(".sel2").fadeIn()
                } else {
                    $(".sel2").fadeOut()
                    $(".back").fadeOut()
                }
                // 自动添加类名 当滚动距离大于当前盒子的offset().top,则切换类名
                if (flag) {
                    $(".sel1 li").each(function (i, ele) {
                        if ($(document).scrollTop() >= $(ele).offset().top) {
                            $(".sel2 li").eq(i + 2).addClass("current");
                            $(".sel2 li").eq(i + 2).siblings().removeClass("current");
                        }
                    })
                }
            });
            // 当点击了这个盒子，body , html的滚动距离变成0
            $(".back").click(function () {
                // alert("a")
                $("body , html").stop().animate({
                    scrollTop: 0
                }, 1000)
            })
            // 对快捷菜单设置，获取快捷菜单
            $(".sel2 li").click(function () {
                flag = false;
                // alert($(this).index())
                var index = $(this).index() - 1;
                // alert(index)
                var current = $(".sel1 li").eq(index).offset().top;
                // 当点击了这个li，页面滚动到对应的li
                $("body,html").animate({
                    scrollTop: current,
                }, function () {
                    flag = true;
                })
                // 点击后，当前的li添加current类名，其他则清除这个类名
                $(this).each(function () {
                    $(this).addClass("current");
                    $(this).siblings().removeClass("current")
                })
            })
        })
    </script>
</head>

<body>
    <ul class="sel1">
        <li class="blu">1</li>
        <li class="red">2</li>
        <li class="gree">3</li>
        <li class="yel">4</li>
        <li class="viol">5</li>
        <li class="whit">6</li>
        <li class="sno">7</li>
        <li class="bla">8</li>
    </ul>
    <div>
        <ul class="sel2">
            <li class="bj">快捷点击</li>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
    <div class="back">返回顶部</div>
</body>

</html>

M24女孩不秃头喔！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
电梯式导航

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫

专栏目录