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中实现命名空间
Nov 23 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
Django使用多数据库的方法
Sep 06 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
小程序如何支持使用 async/await详解
Sep 12 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
一个很不错的PHP翻页类
2009/06/01 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php格式化金额函数分享
2015/02/02 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
python简单实现旋转图片的方法
2015/05/30 Python
Django的分页器实例(paginator)
2017/12/01 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Django单元测试工具test client使用详解
2019/08/02 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
考博专家推荐信模板
2013/12/02 职场文书
售后主管岗位职责
2013/12/08 职场文书
委托书样本
2014/04/02 职场文书
中介业务员岗位职责
2014/04/09 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
初中差生评语
2014/12/29 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
消防宣传标语大全
2015/08/03 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书