页面左右区域超出滚动互不影响，滚动区域联动

最新推荐文章于 2023-05-10 13:42:32 发布

苏七的猫

最新推荐文章于 2023-05-10 13:42:32 发布

阅读量1.8k

点赞数

分类专栏： css动画小效果 js 文章标签： html

本文链接：https://blog.csdn.net/pacholy/article/details/99961030

版权

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css动画小效果

5 篇文章 0 订阅

订阅专栏

想要写一个效果如下图所示，两个区域，之间的滚动条互不影响，各自独立作用。
点击左边导航，右边会跟着滚动
在这里插入图片描述 `

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        nav {
            height: 100%;
            width: 200px;

            position: fixed;
        }

        nav ul {
            height: 300px;
            overflow-y: auto;
        }

        nav ul li {
            height: 50px;
        }

        main {
            padding-left: 240px;
        }

        .active {
            color: red;
        }
    </style>
</head>

<body>
    <nav>
        <ul>
            <li>导航01</li>
            <li>导航02</li>
            <li>导航03</li>
            <li>导航04</li>
            <li>导航05</li>
            <li>导航06</li>
            <li>导航07</li>
            <li>导航08</li>
            <li>导航09</li>
            <li>导航10</li>
            <li>导航11</li>
            <li>导航12</li>
            <li>导航13</li>
            <li>导航14</li>
            <li>导航15</li>
            <li>导航16</li>
            <li>导航17</li>
            <li>导航18</li>
            <li>导航19</li>
            <li>导航20</li>
        </ul>
    </nav>
    <main>
        <h2>标题01</h2>
        <div>面为陪我</div>
        <h2>标题02</h2>
        <div>面为陪我</div>
        <h2>标题03</h2>
        <div>面为陪我</div>
        <h2>标题04</h2>
        <div>面为陪我</div>
        <h2>标题05</h2>
        <div>面为陪我</div>
        <h2>标题06</h2>
        <div>面为陪我</div>
        <h2>标题07</h2>
        <div>面为陪我</div>
        <h2>标题08</h2>
        <div>面为陪我</div>
        <h2>标题09</h2>
        <div>面为陪我</div>
        <h2>标题10</h2>
        <div>面为陪我</div>
        <h2>标题11</h2>
        <div>面为陪我</div>
        <h2>标题12</h2>
        <div>面为陪我</div>
        <h2>标题13</h2>
        <div>面为陪我</div>
        <h2>标题14</h2>
        <div>面为陪我</div>
        <h2>标题15</h2>
        <div>面为陪我</div>
        <h2>标题16</h2>
        <div>面为陪我</div>
        <h2>标题17</h2>
        <div>面为陪我</div>
        <h2>标题18</h2>
        <div>面为陪我</div>
        <h2>标题19</h2>
        <div>面为陪我</div>
        <h2>标题20</h2>
        <div>面为陪我</div>
    </main>
</body>

<script>
    $("ul li").click(function() {
        // 给点击的标签添加类名（字体变红），取消其他同级元素的类名（字体变黑）
        $(this).addClass("active").siblings("li").removeClass("active")
        let ind = $(this).index();
        console.log(ind);
        let toTop = $("main h2").eq(ind).offset().top;
        console.log(toTop);
        $("body").scrollTop
        $("html,body").animate({
            scrollTop: toTop
        }, 400)
    })


    window.onscroll = function() {
        // let toTop = $(document).scrollTop();
        // if (toTop > 300) {
        //     $("ul li:eq(3)").addClass("active").siblings("li").removeClass("active")
        // }
    }
</script>

可以给左边导航每个li标签一个类名，相对应的右边也可以给相同的类名，点击左边导航的时候，根据类名，获取右边相对应标签，距离顶部的高度，然后让页面滚动距离等于该高度。

苏七的猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
页面左右区域超出滚动互不影响，滚动区域联动

想要写一个效果如下图所示，两个区域，之间的滚动条互不影响，各自独立作用。点击左边导航，右边会跟着滚动`<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
复制链接

扫一扫