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 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
Vue实现搜索结果高亮显示关键字
May 28 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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中OO之静态关键字以及类常量的详解
2013/06/07 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
php 删除cookie方法详解
2014/12/01 PHP
详解PHP归并排序的实现
2016/10/18 PHP
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
python字符串Intern机制详解
2019/07/01 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
实习教师个人的自我评价
2013/11/08 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
大学社团活动总结
2014/04/26 职场文书
环保建议书200字
2014/05/14 职场文书
娱乐节目策划方案
2014/06/10 职场文书
车间核算员岗位职责
2014/07/01 职场文书
爱牙日活动总结
2014/08/29 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
奖励通知
2015/04/22 职场文书
力克胡哲观后感
2015/06/10 职场文书
小学校本教研总结
2015/08/13 职场文书