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 相关文章推荐
JS和JQ的event对象区别分析
Nov 24 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
vuejs如何配置less
Apr 25 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
JS数组转字符串实现方法解析
Sep 04 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 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
php db类库进行数据库操作
2009/03/19 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python迭代用法实例教程
2014/09/08 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Python面向对象之继承代码详解
2018/01/29 Python
python对html过滤处理的方法
2018/10/21 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
python实现加密的方式总结
2020/01/19 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
Python操作Jira库常用方法解析
2020/04/10 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
人力资源专员岗位职责
2014/01/30 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
公司内部升职自荐信
2015/03/27 职场文书
对公司的意见和建议
2015/06/04 职场文书
后天观后感
2015/06/08 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python