原生js实现吸顶效果


Posted in Javascript onMarch 13, 2017

实现思路如下:

1. div初始居普通文档流中

2. 给window添加scroll事件(可事件节流),获取div的offset的top值,滚动时scrollTop值和top比较,当到达top时给div添加一个fixed的class使其固定

3. 向上滚动时当到达div初始top时则删除fixed的class,此时div又回到普通文档流中

4. fixed样式非IE6浏览器使用position:fixed,IE6使用position:absolute和IE expression

效果图:

原生js实现吸顶效果

代码如下:

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>无标题文档</title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #div1 {
   width: 100%;
   height: 50px;
   background: skyblue;
  }
 </style>
 <script>
  window.onload = function() {
   var oDiv = document.getElementById('div1');
   var divT = oDiv.offsetTop;
   //console.log(divT);
   window.onscroll = function() {
    // 获取当前页面的滚动条纵坐标位置 (依次为火狐谷歌、safari、IE678)
    var scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    if (scrollT >= divT) {
     if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {
      // 兼容IE6代码
      oDiv.style.position = 'absolute';
      oDiv.style.top = scrollT + 'px';
      oDiv.style.left = 0 + 'px';
     } else { 
      // 正常浏览器代码
      oDiv.style.position = 'fixed';
      oDiv.style.top = 0;
      oDiv.style.left = 0;
     }
    } else
     oDiv.style.position = '';
   }
  }
 </script>
</head>
<body>
 <div class="all">
  以上<br>
  以上<br>
  以上<br>
  以上<br>
  以上<br>
  以上<br>
  以上<br>
  <div id="div1"></div>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
  啦啦啦啦啦<br>
 </div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 #Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 #Javascript
深入理解Node.js中的进程管理
Mar 13 #Javascript
jQuery简易时光轴实现方法示例
Mar 13 #Javascript
JavaScript评论点赞功能的实现方法
Mar 13 #Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 #Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 #Javascript
You might like
discuz安全提问算法
2007/06/06 PHP
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
javascript闭包的理解和实例
2010/08/12 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
python 监控logcat关键字功能
2020/09/04 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
医学检验专业个人求职信范文
2013/12/04 职场文书
家长给老师的道歉信
2014/01/13 职场文书
毕业自我评价
2014/02/05 职场文书
干部年终考核评语
2015/01/04 职场文书
小王子读书笔记
2015/06/29 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
python playwrigh框架入门安装使用
2022/07/23 Python