当前位置:
首页 > 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
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
SQL Server -- 解决存储过程传入参数作为s
关于JS定时器的整理
JS中使用Promise.all控制所有的异步请求都完
js中字符串的方法
import-local执行流程与node模块路径解析流程
检测数据类型的四种方法
js中数组的方法,32种方法
前端操作方法
数据类型
window.localStorage.setItem 和 localStorage.setIte
如何完美解决前端数字计算精度丢失与数