JS30 Day 24 - Sticky Nav学习笔记

最近工作较忙，没什么时间来学JS DAY30趁今天比较有空来发一下文~

这次的题目比较没难度，主要是製作一个常用的页面下拉滚动效果。
当滚动至导览列(Nav)时，会将Nav固定在上方，在滚动至Nav之上时，会脱离固定。
如下图所示:

offsetTop:

offsetTop为元素距离顶部的距离，此处我们先获取nav距离顶部的距离。

      let nav = document.querySelector('#main');      // 在一开始先获取nav距顶部之高度      let navPosition = nav.offsetTop;

接着增听scroll事件、resize事件，当滚动时，会呼叫函数进行处理，而视窗大小变动时，会重新获取一次nav距离顶部的高度。

      window.addEventListener('scroll', scrollHandler);      // 当视窗变化，在重新获取一次      window.addEventListener('resize', () => {        navPosition = nav.offsetTop;      })

接着，为了让nav能够固定在上方，我们写一个fixedMenu的css，并且写一个能让白色Logo跑出来的css。

   .fixedMenu {      position: fixed;      top: 0;      left: 0;      width: 100%;    }        .fixedMenu .logo {      max-width: 100%;    }

scrollY:

在滚动事件处理这边，scrollY即是获取元素从顶部开始所滚动之距离，此处我们是获取视窗所滚动之距离，在我们滚动至大于Nav位于顶部之距离时，即触发将nav固定在上方之处理，反之移除，并且注意，由于我们将nav fixed至上方，故原本body之高度会变少，所以要记得加回去nav本身高度。

      function scrollHandler() {        // 前者为我们可视视窗位于网页的位置,后者为nav于网页顶部之距离        // console.log(window.scrollY, nav.offsetTop);        if (window.scrollY >= navPosition) {          nav.classList.add("fixedMenu");          // 由于触发后，会将nav fixed，也就是会将nav高度从原有body抽离          // 故如不想内容跑掉，就需要再将其高度加回去          document.body.style.paddingTop = nav.offsetHeight + "px";        } else {          // 清除class及padding          nav.classList.remove("fixedMenu");          document.body.style.paddingTop = "";        }      }