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实现的listview效果
Apr 28 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
layer 刷新某个页面的实现方法
Sep 05 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 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简单生成缩略图相册的方法
2015/07/29 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
浅谈Vue.js
2017/03/02 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
Python学习笔记之常用函数及说明
2014/05/23 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
解决c++调用python中文乱码问题
2020/07/29 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
工地门卫岗位职责
2013/12/30 职场文书
节能环保演讲稿
2014/08/28 职场文书
争先创优演讲稿
2014/09/15 职场文书
党员作风建设自查报告
2014/10/23 职场文书
纪录片信仰观后感
2015/06/08 职场文书
夏洛特的网观后感
2015/06/15 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js
Python如何用re模块实现简易tokenizer
2022/05/02 Python