原生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 相关文章推荐
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
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
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
给Python初学者的一些编程技巧
2015/04/03 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
python中__slots__用法实例
2015/06/04 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
运动会通讯稿200字
2015/07/20 职场文书
教师远程培训心得体会
2016/01/09 职场文书
Python字符串常规操作小结
2022/04/03 Python