原生js实现吸顶效果

实现思路如下：

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

效果图：

代码如下：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • js实现导航吸顶效果

    话不多说,请看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title&

  • Android 实现当下最流行的吸顶效果

    Android 实现当下最流行的吸顶效果

    开始逐渐领略到ItemDecoration的美~ 今天让我 使用 ItemDecoration 来完成 可推动的悬浮导航栏的效果,最终实现的效果如下图: 具体实现步骤如下: 根据我前面的文章所讲的RecyclerView的基本使用,我们先来完成基本的recyclerView: 第一步:布局里写一个RecyclerView 第二步:实例化 recyclerView = (RecyclerView) findViewById(R.id.recyclerView); 第三步:获取所需的数据 (这里我们

  • 原生js实现吸顶效果

    原生js实现吸顶效果

    实现思路如下: 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 效果图: 代码如

  • 浅谈react.js中实现tab吸顶效果的问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed. 在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed. 一开始我是这样写的: import cs from 'classnam

  • js实现多个标题吸顶效果

    js实现多个标题吸顶效果

    对于导航的吸顶效果,pc端和移动端的需求可能有些差异.在pc端,我们通常只需要一个顶部导航:在移动端,在滑动页面的时候,更需要多个标题的吸顶(例如地区的选择,需要将省份吸顶). 单个标题吸顶和多个标题吸顶的区别在于:多个标题吸顶需要确定一个高度范围,在这个范围中只能有一个标题吸顶,其他都是固定效果. 一.页面布局及样式 此处为了测试效果,用了几个重复的section标签,大家根据实际需求编写布局和样式. <body> <ul id="container"> &l

  • react-native滑动吸顶效果的实现过程

    react-native滑动吸顶效果的实现过程

    前言 最近公司开发方向偏向移动端,于是就被调去做RN(react-native),体验还不错,当前有个需求是首页中间吸顶的效果,虽然已经很久没写样式了,不过这种常见样式应该是so-easy,没成想翻车了,网上搜索换了几个方案都不行,最后去github上复制封装好的库来实现,现在把翻车过程记录下来. 需求效果 翻车过程 第一种方案 失败 一开始的思路是这样的,大众思路,我们需要监听页面的滚动状态,当页面滚动到要吸顶元素所处的位置的时候,我们设置它为固定定位,不过很遗憾,RN对于position属性

  • 微信小程序实现吸顶效果

    微信小程序实现吸顶效果

    最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了. 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传递到视图层. 后面就对代码进行了调整,避免不停的去setData 效果图 吸顶前 吸顶后 代码部分 wxml <view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view>

  • JS实现吸顶特效

    JS实现吸顶特效

    本文实例为大家分享了JS实现吸顶特效的具体代码,供大家参考,具体内容如下 知识点 1.scroll家族和offset家族的结合运用 2.当nav的offsetTop大于屏幕卷去高度的时候,进行吸顶 3.添加一个固定类,如果满足条件,为nav加类名 运行效果 滚动页面时,保证导航栏吸顶 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

  • 微信小程序wxs实现吸顶效果

    在.js文件中使用page的onPageScroll事件和scroll-view的scroll事件中产生卡顿 (setData 渲染会阻塞其它脚本执行,导致了整个用户交互的动画过程会有延迟), 所以使用wxs响应事件来实现吸顶效果.wxs响应事件基础库 2.4.4 开始支持,低版本需做兼容处理. 附上文档链接:wxs响应事件 吸顶效果 使用scroll-view组件实现滚动效果,页面和scroll-view组件的高度设成100%,当竖向滚动条大于等于导航到顶部距离时,导航变成固定定位,固定显示在

  • vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码

    utils/index,.js /** * 生成UUID * @param withSeparator 是否有分割符 * @returns {string} */ export function generateUUID(withSeparator = true) { let d = new Date().getTime() if (window.performance && typeof window.performance.now === 'function') { d += perf

  • 微信小程序实现吸顶效果的方法实例

    微信小程序实现吸顶效果的方法实例

    目录 1. 实现方式 2. 存在的问题 3. 考虑是否有更好的实现方式 总结 背景是做一个日期title随着用户滑动,当滑到当前日期list数据时,有一个吸顶效果,并且该效果与原来样式不一样 1. 实现方式 scroll-view为小程序原生组件 handleScroll为滑动时触发的事件 scroll-y表示在垂直方向上允许滑动 class为fixed的元素在这做固定定位在scroll-view容器的顶部用于显示当前滑动到的日期 利用动态绑定class的方法去控制visibility的显示与否

  • vue中el-table实现自动吸顶效果(支持fixed)

    vue中el-table实现自动吸顶效果(支持fixed)

    目录 前言 实现思路 效果: 使用: 主要源码: 前言 看了很多案例,从简单的角度,position:sticky,似乎是比较理想的选择,可是当el-table设置了fixed后,这里的fixed会失效.最后还是采用了js监听滚动的思路实现. 实现思路 表格距离顶部的距离 设置表格距离顶部多少就吸顶-offsetTop1 获取滚动条滚动的距离 当滚动条滚动 offsetTop1 后,表格就自动吸顶 效果: 使用: 在el-table标签中配置:v-sticky="{ top: 0, parent

随机推荐