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 相关文章推荐
用jQuery简化JavaScript开发分析
Feb 19 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
简介Python中用于处理字符串的center()方法
2015/05/18 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
财产公证书格式
2014/04/10 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
总结python多进程multiprocessing的相关知识
2021/06/29 Python
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers