#18. Fixed Navbar（原生JS版）

Navbar是每个前端心手都会练习到的部分，本日任务另外添加一个小小的效果：下拉网页时改变Navbar样式。实作请参考CodePen

实作逻辑 & 程序码

JS部分其实很简单：就是在window挂上监听器，监听scroll行为。
如果scroll在Y轴的长度达到预期的数字，就改变nav的属性。

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

function fixNav() {
    // 若视窗在Y轴的移动长度大於nav高度＋150px时，就为nav加上.active选择器
    if(window.scrollY > nav.offsetHeight + 150) {
        nav.classList.add('active')
    } else {
        nav.classList.remove('active')
    }
}

您可以在codepen当中console.log window.scrollY和nav.offsetHeight，查看实际的触发点是否符合程序码：

SCSS部分（节录）
这里有运用伪元素和z-index属性，做出一个滤镜效果，让文字从背景跳出来。

.mainTitle {
  background-image: url('https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  height: 100vh;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  margin-bottom: 20px;
  z-index: -2;

  h1 {
    font-size: 46px;
    margin: -20px 0 20px;
  }

  p {
    font-size: 20px;
    letter-spacing: 1px;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }
}