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 相关文章推荐
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 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
MySQL授权问题总结
2007/05/06 PHP
PHP 远程关机实现代码
2009/11/10 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
Python数组遍历的简单实现方法小结
2016/04/27 Python
详解python中requirements.txt的一切
2017/03/03 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Python能做什么
2020/06/02 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
物流管理应届生求职信
2013/11/07 职场文书
财务管理个人自荐书范文
2013/11/24 职场文书
团代会主持词
2014/04/02 职场文书
工会工作先进事迹
2014/08/18 职场文书
办理护照工作证明
2014/10/10 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
销售开票员岗位职责
2015/04/15 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL