初学者写的滚动监听代码

学前端的小梨子
318 阅读1分钟 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>15 滚动监听</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
        }

        .continer {
            width: 1190px;
            height: 100%;
            margin: 0 auto;
        }

        .continer div {
            width: 100%;
            height: 100%;
            text-align: center;
            color: #fff;
            font-size: 30px;
        }

        .aside {
            position: fixed;
            width: 40px;
            right: 20px;
            top: 300px;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
        }

        .aside li {
            height: 50px;
            border: 1px solid #dddddd;
        }

        .aside li a {
            color: darkgoldenrod;
        }

        .aside li.current {
            background-color: chocolate;
        }

        .aside li.current a {
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="continer" id="box">
        <div class="current">爱逛好货</div>
        <div>好店主播</div>
        <div>品质特色</div>
        <div>猜你喜欢</div>
    </div>
    <ul class="aside" id="aside">
        <li class="current">
            <a href="javascript:void()0">爱逛好货</a>
        </li>
        <li>
            <a href="javascript:void()0">好店主播</a>
        </li>
        <li>
            <a href="javascript:void()0">品质特色</a>
        </li>
        <li>
            <a href="javascript:void()0">猜你喜欢</a>
        </li>
    </ul>

    <script src="js/myAnimation-2.js"></script>
    <script>
        window.onload = function () {
            //1、获取标签
            var box = document.getElementById('box');
            var oDiv = box.children;
            var aside = document.getElementById('aside');
            var lis = aside.children;
            var isClick = false;//isClick来判断页面是否滚动，false为没有滚动，true为滚动了
            //2、上色
            var colors = ['green', 'blue', 'red', 'orange'];
            for (var i = 0; i < oDiv.length; i++) {
                oDiv[i].style.backgroundColor = colors[i];
            }
            //3、监听按钮
            for (var j = 0; j < lis.length; j++) {
                lis[j].index = j;
                lis[j].onclick = function () {
                    isClick = true;
                    for (var k = 0; k < lis.length; k++) {
                        lis[k].className = '';
                    }
                    //设置当前的类
                    this.className = 'current';
                    //页面滚动
                    startAnimation(document.documentElement, {
                        "scrollTop": this.index * document.body.clientHeight
                    }, function () {
                        isClick = false;
                    })
                    /**document.documentElement.scrollTop = this.index*document.body.clientHeight;
                     * document.documentElement是代表页面，相当于整个html
                     */
                }
            }
            //4、页面滚动的监听
            window.onscroll = function () {
                if (!isClick) {
                    //4、获取页面滚动的高度
                    var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    for (var i = 0; i < lis.length; i++) {
                        if (docScrollTop >= oDiv[i].offsetTop) {
                            for (var j = 0; j < oDiv.length; j++) {
                                lis[j].className = '';
                            }
                            lis[i].className = 'current';
                        }
                    }
                }
            }
        }
    </script>
</body>

</html>
avatar
文章
阅读
粉丝