VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • 教你用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吗?

出处:https://www.cnblogs.com/xFeater/p/16944353.html


相关教程