<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .header {
        /* position: relative; */
        width: 100%;
        height: 50px;
        background-color: aqua;
    }
    .box,
    .box>div {
        width: 100%;
        height: 800px;
        background-color: burlywood;
    }
    .qw {
        width: 100%;
        height: 500px;
        background-color: rgb(48, 29, 4);
    }
    .fixed {
        position: fixed;
        top: 0;
        left: 0;
    }
    /* daohang */
    .siteNav {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: fixed;
        right: 20px;
        bottom: 100px;
        height: 300px;
        border: 3px solid rgb(15, 157, 86);
        font-size: 30px;
        font-weight: bold;
        text-align: center;
    }
    .site {
        /* flex-grow: 1; */
        width: 50px;
        height: 50px;
        line-height: 50px;
        /* margin-top: 20px; */
        background-color: rgb(15, 157, 86);
    }
    .site01:nth-child(1) {
        background-color: rgb(153, 191, 17);
    }
    .site02:nth-child(2) {
        background-color: rgb(17, 191, 84);
    }
    .site03:nth-child(3) {
        background-color: rgb(17, 113, 191);
    }
    .site0:nth-child(4):nth-child(4) {
        background-color: rgb(185, 17, 191);
    }
    .color01 {
        background-color: aquamarine;
    }
    #jiazai {
        width: 1px;
        height: 1px;
    }
</style>
<body>
    <div class=”qw”></div>
    <div style=”width:100%; height:50px;background-color: red;”>
        <div class=”header”></div>
    </div>
    <div class=”box”>
        <div class=”site01″></div>
        <div class=”site02″></div>
        <div class=”site03″></div>
        <div class=”site04″></div>
        <p id=”jiazai”></p>
    </div>
    <div class=”siteNav”>
        <div class=”site”>1</div>
        <div class=”site”>2</div>
        <div class=”site”>3</div>
        <div class=”site”>4</div>
    </div>
    <script>
        var header = document.querySelector(‘.header’)
        var box = document.querySelector(‘.box’)
        var qw = document.querySelector(‘.qw’)
        var boxSite = document.querySelectorAll(‘.box>div’)
        console.log(boxSite);
        var site = document.querySelectorAll(‘.siteNav>.site’)
        console.log(site);
        //获取页面元素中每一个快,并存放到新数组
        var top01 = []
        boxSite.forEach(function (a) {
            top01.push(a.offsetTop)
        })
        var boxTop = box.offsetTop
        console.log(boxTop);
        window.onscroll = function () {
            var h = document.documentElement.scrollTop || document.body.scrollTop
            if (h >= boxTop) {
                header.classList.add(‘fixed’)
            } else {
                header.classList.remove(‘fixed’)
            }
            top01.forEach(function (item, index) {
                var top = document.documentElement.scrollTop || document.body.scrollTop
                if (top > item) {
                    //遍历导航条
                    site.forEach(function (item01) {
                        item01.classList.remove(‘color01’)
                    })
                    //排它
                    site[index].classList.add(‘color01’)
                }
            })
        }
        //点击导航条对应页面顶部位置
        site.forEach(function (navs, index) {
            navs.addEventListener(‘click’, function () {
                window.scrollTo({ top: top01[index], behavior: ‘smooth’ })
            })
        })
        //赖加载
        var num = true
     var  num01 = 0
        window.addEventListener(‘scroll’, function () {
            var mapTop = document.documentElement.scrollTop || document.body.scrollTop
            console.log(mapTop);
            if (mapTop + window.innerHeight + 100 >= mapTop &&num) {
               num =false
                var div = document.createElement(‘div’)
                box.appendChild(div)
                // document.body.appendChild(div)
                div.innerText = ‘dfgrregrwegrg’
                num01++
            }
            if (num01 < 5) {
                    num = true
                }
        })
    </script>
</body>
</html>