54 lines
1.8 KiB
JavaScript
54 lines
1.8 KiB
JavaScript
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() |