25.固定导航

固定导航

html部分

    

        
logo
        

            
Home
            
About
            
contact
            
Service
        
    

css部分

*{
    margin: 0;
    padding: 0;
}

nav{
    position:sticky;
    top: 0;
    background-color: #fff;
    z-index: 2;
}

@keyframes active{
    0%{transform: translateY(-100%);}
    100%{transform: translateY(0);}
}

.active{
    animation: active .5s;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.7);
}

nav  .container{
    max-width: 1200px;
    margin: 0 auto;
    height: 20px;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    
}


nav .nav{
    display: flex;
    gap: 20px;
}

main{
    height: 200vh;
    background-color: red;
}

js部分

// 获取dom
const nav=document.querySelector("nav");

window.addEventListener("scroll",(e)=>{
    const box=nav.getBoundingClientRect();
    // 固定y轴大于盒子高度+20添加active类，否则移除
    if(this.scrollY>=box.height+20){
        nav.classList.add("active");
    }else{
        nav.classList.remove("active");
    }
})

效果