50projects50days知识点-25-sticky-navigation

示例网址：

https://50projects50days.com/projects/sticky-navigation/
http://50projects.tc.cluski.top/50projects50days/sticky-navigation/

效果：

思路：

排版没有什么难度，往下滑的时候导航栏会一直在页面顶部是因为用了position: fixed。而下拉到一定程度，就会发生变化是js实现的。js中使用window.scrollY获取下拉的距离。

const nav = document.querySelector('.nav')
window.addEventListener('scroll', fixNav)

function fixNav() {
    if(window.scrollY > nav.offsetHeight + 150) {
        nav.classList.add('active')
    } else {
        nav.classList.remove('active')
    }
}