#13-消失吧！Navbar！让你的网页更多空间 (JS)

好的Nav bar的动态可以让网站不那麽呆板，
其实实作的技术也不难，就是侦测页面的滚动
向下滑的时候再出现

今天实作两个：

提案	Nav bar的消失	Nav bar的变色
目的	争取更多展示空间 → 往下滑时消失，往上滑时出现	更好的阅读体验，也常常看到缩小版本
JS实作	侦测scrollY位置	使用Intersection Observer
成果图

一个一个来看看吧～

Nav bar的消失

用JS侦测浏览器现在的位置 vs. 刚刚的位置，
Y比较大的话表示往下滑，那就让Nav bar消失，
反之就出现。

//JS
let lastPos = 0
const nav = document.querySelector('nav');

// 监听scroll事件
document.addEventListener('scroll',function(){
  let currentPos =  window.scrollY;
  //   往下滑
  if(currentPos > lastPos){
        nav.style.top = "-60px"; //让nav bar消失
  }else{
    nav.style.top = "0px"; //让nav bar出现
  }
  lastPos = currentPos;//再记住现在位置，跟未来的位置做比较
});

Nav bar的变色

利用之前提到的Intersection Observer API 传送门！
来侦测第一个区块消失了没，消失的话，就让Navbar变色。


//选观察对象, 我们观察对象是section1
//当section1要消失的时候，就让Nav bar换色好让他在section2颜色更显眼
const nav = document.querySelector('nav');
const section1 = document.querySelector('.section1');

//当section1离开的时候就加上新的样式
const changeColor = (entries, observer) =>{
  entries.forEach(entry=>{
    if(!entry.isIntersecting){
      nav.classList.add('scrolled');
    }else{
       nav.classList.remove('scrolled');
    }
  })
  
}

//做一个新的观察
let observer = new IntersectionObserver(changeColor, options);
//观察对象section1
observer.observe(section1);