案例介绍

欢迎来的我的小院，我是霍大侠，恭喜你今天又要进步一点点了！

我们来用 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 (视频源码免费获取)

（部分素材来源于互联网，如有保护请联系作者）