JS监听滚动条进度

HTML部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div>
    <h2>scroll</h2>
    <div id="nav">
        <div class="f1">floor1</div>
        <div class="f2">floor2</div>
        <div class="f3">floor3</div>
        <div class="f4">floor4</div>
        <div class="f5">floor5</div>
    </div>
    <p>
        页面结构
    </p>
    <div class="main">
        <div id="f1">测试1</div>
        <div id="f2">测试2</div>
        <div id="f3">测试3</div>
        <div id="f4">测试4</div>
        <div id="f5">测试5</div>
    </div>
</div>
</body>
</html>

 

CSS部分：

    <style>
        .main div {
            height: 970px;
            width: 300px;
            margin: 20px;
            background-color: #C0C0C0;
        }

        #nav {
            position: fixed;
            width: 100px;
            height: 200px;
            top: 40%;
            right: 10px;
        }

        #nav div {
            cursor: pointer;
            text-align: center;
        }
    </style>

 

JS部分：

<script>
    $(function () {
        $(window).scroll(function () {//为页面添加页面滚动监听事件
            var wst = $(window).scrollTop(); //滚动条距离顶端值
            for (var i = 1; i < 6; i++) {             //加循环
                if ($("#f" + i).offset().top <= wst + 10) { //判断滚动条位置
                    $('#nav div').css("background-color", "white");
                    $(".f" + i).css("background-color", "red");
                }
            }
        });
        $('#nav div').click(function () {
            $('html').animate({scrollTop: $("#" + this.className).offset().top}, 500);
            // $("#" + this.className)[0].scrollIntoView(true);//h5 scrollIntoView()

        });
    });
</script>

 

posted @ 2018-07-20 15:18  _Iniesta  阅读(6601)  评论(0)  编辑  收藏  举报