教你用JavaScript实现粘性导航

案例介绍

欢迎来的我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用JavaScript编程实战案例，做一个粘性导航。移动页面导航仍在页面上方。通过实战我们将学会scrollY属性、offsetTop和offsetHeight属性。

案例演示

运行程序后，页面上方出现导航栏，向下移动导航栏仍在页面上方，当移动到一定位置时，导航栏变色。

案例设计

JavaScript实战案例-粘性导航
我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。
其中架构设计包含了HTML，CSS，JavaScript 共三部分代码。

源码学习

进入核心代码学习，我们先来看HTML中的核心代码。

<!-- 有个小院-兴趣编程 -->
<div class="navbar">
  <a href="#"><img src="logo.png"/></a>
  <ul>
    <li><a href="#">课程</a></li>
    <li><a href="#">项目</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</div>
<div class="top-container">
  <h1>欢迎来到我的小院</h1>
</div>
<div class="bottom-container">
  <p class="text">
    有个小院是一个兴趣编程的学习社群，旨在帮助对编程感兴趣的朋友，
    可以帮助学习者，找到编程开发工作，掌握编程技能等等。
  </p>
  <p class="text">
    霍大侠从事多年的互联网产品开发和教育工作，希望通过兴趣编程的方法，
    教大家学习编程开发。 通过上手开发有趣项目的形式，产生一个迭代开发学习的过程。
  </p>
  <!-- 多个<p>元素以下省略 -->
</div>

然后我们来编写核心的JavaScript代码，使用querySelector获取导航和底部文字信息，添加滚动事件，让导航栏滚动过顶部图片后就变成黑色，如果没有滚过或返回顶部就变回白色。

<script>
  //有个小院-兴趣编程
  const navbarEI=document.querySelector(".navbar");
const bottomContainerEI=document.querySelector(".bottom-container");
addEventListener("scroll",()=>{
  if(scrollY>bottomContainerEI.offsetTop-navbarEI.offsetHeight-50){
    navbarEI.classList.add("active");
  }else{
    navbarEI.classList.remove("active");
  }
});
</script>

总结思考

学习点
1、scrollY属性：返回当前页面或者文档向向上滚动的尺寸
2、offsetTop属性：返回当前元素相对于 offsetParent 节点顶部边界的偏移像素值
返回值包含:
元素顶部偏移的像素值，元素的外边距（margin）
offsetParent 元素的顶部内边距（padding）、边框（border）及滚动条
3、offsetHeight属性：返回该元素的像素高度，高度包含内边距（padding）和边框（border）

问答
1、offsetTop的返回值包不包含margin？
2、offsetHeight的返回值包含padding和border吗？

关注我，跟着我每天学习一点点，让你不在枯燥，不在孤单..

全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
私微信：huodaxia_xfeater
二维码： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公众号：有个小院（微信公众号：yougexiaoyuan）
github：yougexiaoyuan (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）