原生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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
python将视频转换为全字符视频
2019/04/26 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
会计工作决心书
2014/03/11 职场文书
篮球赛口号
2014/06/18 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS