原生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 相关文章推荐
jquery中输入验证中一个不错的效果
Aug 21 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
vue增删改查的简单操作
Jul 15 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
使用typescript快速开发一个cli的实现示例
Dec 09 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
php 三维饼图的实现代码
2008/09/28 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
房地产销售计划书
2014/01/10 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android