React操作真实DOM实现动态吸底部的示例


Posted in Javascript onOctober 23, 2017

动态吸底:开始时fixed在页面上,当页面滚动到距离底部一定距离的时fixed部分固定。

这个是需要计算页面滚动距离的,如果使用Jquery或者原生js实现是非常好实现的,但是由于使用react并不推崇操作DOM,但是如果使用virtual DOM的话是无法实现该效果的,所以还是要引入js去直接获取DOM进行操作。

react在componentDidMount之后页面渲染完成,所以可以在这里面直接用js原生方法获取DOM元素,进而进行操作。

componentDidMount() {
 this.changeFixed()
}
//?算高度
changeFixed(){
 //getDOMNode
 const layoutNode = document.querySelectorAll('.page-layout')[0];
 const orderPriceNode = document.querySelectorAll('.test-price')[0];
 window.addEventListener('scroll', function (e) {
  const windowInnerHeight = window.innerHeight;
  const layoutNodeHeight = layoutNode.offsetHeight;
  //滚动超出视野距离
  let scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
  const distanceBottom = layoutNodeHeight - scrollTop - windowInnerHeight;
  //120的时候吸底
  if(distanceBottom <= 120){
   orderPriceNode.classList.remove('fixed');
  }else{
   orderPriceNode.classList.add('fixed');
  }
 })
}

这样就实现了当距离底部120的时候吸底

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 #Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 #Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 #Javascript
JS返回顶部实例代码
Aug 09 #Javascript
VUE2实现事件驱动弹窗示例
Oct 21 #Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 #Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 #Javascript
You might like
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
JavaScript this关键字的深入详解
2021/01/14 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Python实现简单的四则运算计算器
2016/11/02 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
Python中的函数作用域
2018/05/07 Python
python实现年会抽奖程序
2019/01/22 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
python线程join方法原理解析
2020/02/11 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
python datetime处理时间小结
2020/04/16 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
后勤人员岗位职责
2013/12/17 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
高考1977观后感
2015/06/04 职场文书
python实现高效的遗传算法
2021/04/07 Python
详解Python为什么不用设计模式
2021/06/24 Python
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript