JS实现吸顶特效


Posted in Javascript onJanuary 08, 2020

本文实例为大家分享了JS实现吸顶特效的具体代码,供大家参考,具体内容如下

知识点

1.scroll家族和offset家族的结合运用
2.当nav的offsetTop大于屏幕卷去高度的时候,进行吸顶
3.添加一个固定类,如果满足条件,为nav加类名

运行效果

JS实现吸顶特效

滚动页面时,保证导航栏吸顶

JS实现吸顶特效

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{margin: 0;padding: 0;list-style: none;border:none}
 img{vertical-align: top;width: 100%;}
 section{width: 70%;margin: 0 auto;}
 .nav{position: fixed;left: 0;top: 0;width: 100%}
 </style>
</head>
<body>
 <header id="head">
 <img src="images/top.png" alt="">
 </header>
 <nav id="nav">
 <img src="images/nav.png" alt="">
 </nav>
 <section>
 <img src="images/body01.png" alt="">
 <img src="images/body02.png" alt="">
 </section>
 <script src="../../MyTools/MyTools.js"></script>
 <script>
 window.addEventListener('load',function (ev) {
  // 1. 求出头部高度
  var navTopHeight = myTool.$('nav').offsetTop;
  // 2. 监听页面滚动
  window.addEventListener('scroll',function (ev1) {
  var scrollTopHeight = myTool.scroll().top;
  // 2.1 判断
  if(scrollTopHeight >= navTopHeight){
   myTool.addClassName(myTool.$('nav'),'nav')
  }else{
   myTool.removeClassName(myTool.$('nav'),'nav');
  }
  })
 })
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 #Javascript
electron+vue实现div contenteditable截图功能
Jan 07 #Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 #Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 #Javascript
微信小程序服务器日期格式化问题
Jan 07 #Javascript
webpack 最佳配置指北(推荐)
Jan 07 #Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 #Javascript
You might like
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php echo 输出字符串函数详解
2010/05/13 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
JavaScript计算出两个数的差值
2020/03/19 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
python 切片和range()用法说明
2013/03/24 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python实现视频下载功能
2017/03/14 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
wxPython色环电阻计算器
2019/11/18 Python
django ORM之values和annotate使用详解
2020/05/19 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
如何用python批量调整视频声音
2020/12/22 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
工程造价与管理专业应届生求职信
2013/11/23 职场文书
项目开发计划书
2014/01/09 职场文书
4s店活动策划方案
2014/08/25 职场文书
庆元旦演讲稿
2014/09/15 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
分居协议书范本
2014/11/03 职场文书
代理词怎么写
2015/05/25 职场文书
学生安全责任协议书
2016/03/22 职场文书
Go语言并发编程 sync.Once
2021/10/16 Golang