用javascript解决点击小模块跳转大模块问题-CSDN博客

本文链接：https://blog.csdn.net/ddmaiwxwxaiddm/article/details/142736697
<!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;
        }

        .box div {
            margin-left: 200px;
            width: 800px;
            height: 640px;
            background-color: pink;
        }

        .box {
            float: left;
        }

        ul li {
            width: 200px;
            height: 80px;
            line-height: 80px;
            color: snow;
        }

        ul {
            float: left;
            background-color: skyblue;
            list-style: none;
            padding: 0;
            text-align: center;
            position: fixed;
        }

        img {
            display: block;
            float: left;
            margin-left: 0;
        }

        .active {
            color: #f9aaee;
            background-color: rgb(0, 89, 144);
        }

        .fx ul {
            margin-top: 80px;
        }

        /* .js {
            width: 800px;
            height: 1px;
        } */
        .na {
            position: fixed;
            width: 1230px;
            height: 80px;
            background-color: purple;
        }

        .box {
            margin-top: 80px;
        }

        td {
            width: 140px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }

        table {
            margin-top: 10px;
            background-color: plum;
        }

        .na span {
            width: 120px;
            height: 80px;
            float: left;
            line-height: 80px;
            color: snow;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="na">
        <img src="../图片/可爱头像1.png" alt="" width="80px" height="80px">
        <span>邓冬梅</span>
        <table>
            <tr>
                <td>电视剧</td>
                <td>电影</td>
                <td>综艺</td>
                <td>音乐</td>
                <td>抖音</td>
                <td>微博</td>
                <td>ins</td>
            </tr>
        </table>
    </div>
    <div class="fx">
        <ul>
            <li class="active">虞书欣</li>
            <li>嘘，国外在冬眠</li>
            <li>永夜星河</li>
            <li>苍兰决</li>
            <li>云之羽</li>
            <li>两个人的小森林</li>
            <li>月光变奏曲</li>

        </ul>
        <div class="box">
            <div><img src="虞书欣.png" alt="" width="300px" height="280px">
                <p>虞书欣<br>
                    代表作：永夜星河，嘘，国王再冬眠</p>
            </div>
            <div><img src="嘘.png" alt="" width="300px" height="560px">
                <img src="嘘1.png" alt="" width="330px" height="560px">
            </div>
            <div>永夜星河</div>
            <div>苍兰决</div>
            <div>云之羽</div>
            <div>两个人的小森林</div>
            <div>月光变奏曲</div>
            <!-- <div class="js"></div> -->
        </div>
    </div>
    <script>
        const dv = document.querySelectorAll('.box div')
        const ll = document.querySelectorAll('ul li')
        // const ell = document.querySelector('ul')
        let arr = []

        for (let i = 0; i < dv.length; i++) {
            arr[i] = dv[i].offsetTop
            console.log(arr[i])
            ll[i].addEventListener('click', function () {
                document.querySelector('ul .active').classList.remove('active')
                ll[i].classList.add('active')
                document.documentElement.scrollTop = arr[i] - 80
            })
        }
        window.addEventListener('scroll', function () {
            const n = document.documentElement.scrollTop
            for (let i = 0; i < dv.length; i++) {
                console.log(i);
                if ((n > arr[i] && n < arr[i + 1]) || (i === ll.length - 1 && n > arr[i])) {
                    let active = document.querySelector('ul .active')
                    if (active) active.classList.remove('active')
                    ll[i].classList.add('active')
                }
            }
        })

    </script>
</body>

</html>