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写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
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
基于php下载文件的详解
2013/06/02 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
php算法实例分享
2015/07/14 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
Python入门篇之函数
2014/10/20 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
学习python可以干什么
2019/02/26 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
python 检测图片是否有马赛克
2020/12/01 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
应用电子专业学生的自我评价
2013/10/16 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
师范生见习报告范文
2014/11/03 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
食品安全责任书范本
2015/05/09 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server