var body = document.querySelector("body");
    var Menu = document.querySelector(".menu");
    var menus = {
        status: 200,
        result: {
            menu: [
                { id: 1, menuli: '爱逛好货', min: 20, max: 60 },
                { id: 2, menuli: '好店直播', min: 70, max: 120  },
                { id: 3, menuli: '品质特色', min: 122, max: 172  },
                { id: 4, menuli: '实惠热卖', min: 173, max: 223  }
            ]
        }
    }

    body.onscroll = function () {
        var y = document.documentElement.scrollTop;
        menus.result.menu.forEach(function(val,index){
            if (val.min < y && y < val.max) {
                Roll()
                document.querySelectorAll(".menu li")[index].className = "bamenuli"
                index == 0 ? document.querySelector("ul").className = "menu fixed" : ''
            } else if (y<20){
                document.querySelector("ul").className = "menu"
            }
        });
    }

    
    function Renderli() {
        menus.result.menu.forEach( function(val,index) {
            Menu.innerHTML += `<li class="${ index == 0 ? 'bamenuli' : ''}">${val.menuli}</li>`
        } );
        
        document.querySelectorAll(".menu li").forEach(function(val,index) {
            val.onclick = function() {
                if (menus.result.menu[index].min > 20) {
                    document.querySelector("ul").className = "menu fixed"
                }
                Roll()
                val.className = "bamenuli"
                document.documentElement.scrollTop = menus.result.menu[index].min
                // console.log("index: ", index)
            }
        })
    }

    function Roll(){
        var Menu = document.querySelectorAll(".menu li")
        Menu.forEach(function(val,index){    
            val.className = ""
        })
    }

    Renderli()