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 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
纯JS实现表单验证实例
Dec 24 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
微信小程序保存图片到相册权限设置
Apr 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实现手机归属地查询API接口实现代码
2012/08/27 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
js构造函数创建对象是否加new问题
2018/01/22 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
wxPython 入门教程
2008/10/07 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
Django 重写用户模型的实现
2019/07/29 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
Django权限控制的使用
2021/01/07 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
大专生毕业的自我评价
2014/02/06 职场文书
热门专业求职信
2014/05/24 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
搭建Yolov5服务器
2022/04/30 Servers