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 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
如何用JavaScipt测网速
May 09 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 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
php导出生成word的方法
2015/12/25 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
javascript实用方法总结
2015/02/06 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python实现网页链接提取的方法分享
2014/02/25 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
python实现flappy bird小游戏
2018/12/24 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
python实现海螺图片的方法示例
2019/05/12 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
2016公务员年度考核评语
2015/12/01 职场文书