楼层 - 简书

楼层

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #box {
            position: fixed;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: chartreuse;
        }

        #box li {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-bottom: 1px solid red;
            font-size: 20px;
        }

        #main {
            font-size: 100px;
            color: #fff;
        }

        #main #chi {
            height: 500px;
            background: green;
        }

        #main #he {
            height: 300px;
            background: pink;
        }

        #main #wan {
            height: 400px;
            background: burlywood;
        }

        #main #le {
            height: 800px;
            background: darkgrey;
        }


    </style>
</head>
<body>
<div id="box">
    <ul id="boxList">
        <li>吃</li>
        <li>喝</li>
        <li>玩</li>
        <li>乐</li>
    </ul>
</div>
<div id="main">
    <div id="chi">吃</div>
    <div id="he">喝</div>
    <div id="wan">玩</div>
    <div id="le">乐</div>
</div>
<script>
    var box = document.getElementById('box');
    var boxli = box.getElementsByTagName('li');
    var main = document.getElementById('main');
    var adiv = main.getElementsByTagName('div');
    var timer = null;
    for (var i = 0; i < boxli.length; i++) {
        boxli[i].index = i;
        boxli[i].onclick = function () {
            var myoffset = adiv[this.index].offsetTop;
            var step = 18;
            window.clearInterval(timer);
            timer = window.setInterval(function () {
                var curtop = document.documentElement.scrollTop || document.body.scrollTop;
                if (curtop >= myoffset) {
                    curtop -= step;
                    if (curtop <= myoffset) {
                        curtop = myoffset;
                        clearInterval(timer);
                        document.documentElement.scrollTop = curtop;
                        document.body.scrollTop = curtop;
                    }
                    document.documentElement.scrollTop = curtop;
                    document.body.scrollTop = curtop;
                } else {
                    curtop += step;
                    if (curtop>=myoffset) {
                        curtop=myoffset;
                        clearInterval(timer);
                        document.documentElement.scrollTop = curtop;
                        document.body.scrollTop = curtop;
                    }
                    document.documentElement.scrollTop = curtop;
                    document.body.scrollTop = curtop;
                }
            }, 20);
        };
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #box {
            position: fixed;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: chartreuse;
            z-index: 10;
        }

        #box li {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-bottom: 1px solid red;
            font-size: 20px;
        }

        #main {
            font-size: 100px;
            color: #fff;
            position: relative;
        }

        #main #chi {
            height: 500px;
            background: green;
        }

        #main #he {
            height: 300px;
            background: pink;
        }

        #main #wan {
            height: 400px;
            background: burlywood;
        }

        #main #le {
            height: 800px;
            background: darkgrey;
        }

        #box .bg {
            background: red;
        }
    </style>
</head>
<body>
<div id="box">
    <ul id="boxList">
        <li class="bg">吃</li>
        <li>喝</li>
        <li>玩</li>
        <li>乐</li>
    </ul>
</div>
<div id="main">
    <div id="chi">吃</div>
    <div id="he">喝</div>
    <div id="wan">玩</div>
    <div id="le">乐</div>
</div>
<script>
    window.onscroll = myscroll;
    var box = document.getElementById('box');
    var boxli = box.getElementsByTagName('li');
    var main = document.getElementById('main');
    var adiv = main.getElementsByTagName('div');
    var chi = document.getElementById('chi');
    var he = document.getElementById('he');
    var wan = document.getElementById('wan');
    var le = document.getElementById('le');
    var timer = null;
    for (var i = 0; i < boxli.length; i++) {
        boxli[i].index = i;
        boxli[i].onclick = function () {
            window.onscroll = null;
            for (var i = 0; i < boxli.length; i++) {
                boxli[i].className = '';
            }
            this.className = 'bg';
            myoffset = adiv[this.index].offsetTop;
            var step = 18;
            window.clearInterval(timer);
            timer = window.setInterval(function () {
                var curtop = document.documentElement.scrollTop || document.body.scrollTop;
                if (curtop >= myoffset) {
                    curtop -= step;
                    if (curtop <= myoffset) {
                        curtop = myoffset;
                        clearInterval(timer);
                        window.onscroll = myscroll;
                        document.documentElement.scrollTop = curtop;
                        document.body.scrollTop = curtop;
                    }
                    document.documentElement.scrollTop = curtop;
                    document.body.scrollTop = curtop;
                } else {
                    curtop += step;
                    if (curtop >= myoffset) {
                        curtop = myoffset;
                        clearInterval(timer);
                        window.onscroll = myscroll;
                        document.documentElement.scrollTop = curtop;
                        document.body.scrollTop = curtop;
                    }
                    document.documentElement.scrollTop = curtop;
                    document.body.scrollTop = curtop;
                }
            }, 20);
        };
    }
    function myscroll() {
        var curtop = document.documentElement.scrollTop || document.body.scrollTop;
        fn(curtop, chi, boxli[0]);
        fn(curtop, he, boxli[1]);
        fn(curtop, wan, boxli[2]);
        fn(curtop, le, boxli[3]);
    }
    function fn(curtop, obj, mybox) {
        if (curtop >= obj.offsetTop) {
            for (var i = 0; i < boxli.length; i++) {
                boxli[i].className = '';
            }
            mybox.className = 'bg';
        }
    }
</script>
</body>
</html>

最后编辑于：2017.12.08 04:24:32

楼层

推荐阅读更多精彩内容