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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
Vue实现简单的留言板
Oct 23 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
利用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
封装一个PDO数据库操作类代码
2009/09/09 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
一句话JavaScript表单验证代码
2009/08/02 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python实现统计代码行的方法分析
2017/07/12 Python
django 常用orm操作详解
2017/09/13 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
网站设计师的岗位职责
2013/11/21 职场文书
农村婚礼证婚词
2014/01/10 职场文书
初中家长寄语
2014/04/02 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
使用Ajax实现进度条的绘制
2022/04/07 Javascript