React操作真实DOM实现动态吸底部的示例

动态吸底：开始时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的时候吸底

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React如何将组件渲染到指定DOM节点详解

    React如何将组件渲染到指定DOM节点详解

    前言 众所周知React优点之一就是他的API特别简单.通过render 方法返回一个组件的基本结构,如同一个简单的函数,就可以得到一个可以复用的react组件.但是有时候还是会有些限制的,尤其是他的API中,不能控制组件所应该渲染到的DOM节点,这就让一些弹层组件很难控制.当父元素设置为overflow:hidden 的时候,问题就会出现了. 例如就像下面的这样: 我们实际期待的效果是这样的: 幸运的是,虽然不是很明显,但有一个相当优雅的方式来绕过这个问题.我们学到的第一个react函数是re

  • react.js 获取真实的DOM节点实例(必看)

    为了获取真实的dom节点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点. var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type="text" ref="m

  • React操作真实DOM实现动态吸底部的示例

    动态吸底:开始时fixed在页面上,当页面滚动到距离底部一定距离的时fixed部分固定. 这个是需要计算页面滚动距离的,如果使用Jquery或者原生js实现是非常好实现的,但是由于使用react并不推崇操作DOM,但是如果使用virtual DOM的话是无法实现该效果的,所以还是要引入js去直接获取DOM进行操作. react在componentDidMount之后页面渲染完成,所以可以在这里面直接用js原生方法获取DOM元素,进而进行操作. componentDidMount() { this

  • react中的DOM操作实现

    目录 前面的话 使用场景 ref [HTML元素] [类组件] [函数式组件] [对父组件暴露DOM节点] 非受控组件 [默认值] ReactDOM [render()] [unmountComponentAtNode()] [findDOMNode()] 新ref 前面的话 某些情况下需要在典型数据流外强制修改子代.要修改的子代可以是 React 组件实例,也可以是 DOM 元素.这时就要用到refs来操作DOM 使用场景 下面是几个适合使用 refs 的情况 1.处理焦点.文本选择或媒体控制

  • 详解操作虚拟dom模拟react视图渲染

    1.为什么要使用虚拟dom? 网页性能优化->尽量少操作DOM 2..虚拟DOM(Virtual DOM) VS js直接操作原生DOM(innerHTML) function Raw() { var data = _buildData(), html = ""; ... for(var i=0; i<data.length; i++) { var render = template; render = render.replace("{{className}}&

  • React之虚拟DOM的实现原理

    目录 React虚拟DOM机制 React diff 算法 1. 传统 diff 算法 2. react diff 算法 总结 最后 React虚拟DOM机制 虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象 状态变更时,记录新树和旧树的差异 最后把差异更新到真正的dom中 React引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API. 基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,Reac

  • vue操作dom元素的3种方法示例

    1.原生js操作dom const dom = getElementById('box') 2.vue官方方法:ref vue中的ref是把当前dom元素 " 抽离出来 " ,只要通过 this.$refs就可以获取到 < div class="set" ref="up"> .set是我们要操作的dom对象,它的ref是 up @click="Alert" 给父元素一个点击事件, 接下来我们来编写这个方法 meth

  • Vue虚拟Dom到真实Dom的转换

    Vue虚拟Dom到真实Dom的转换

    再有一颗树形结构的Javascript对象后, 我们需要做的就是讲这棵树跟真实Dom树形成映射关系.我们先回顾之前的mountComponnet 方法: export function mountComponent(vm, el) { vm.$el = el ... callHook(vm, 'beforeMount') ... const updateComponent = function () { vm._update(vm._render()) } ... } 我们已经执行完了vm._r

  • JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支

    本文实例讲述了JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支.分享给大家供大家参考,具体如下: 页面加载事件的比较 window.onload jquery 中的 document.ready document.ready = function (callback) { // 兼容FF,Google if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function

  • 微信小程序官方动态自定义底部tabBar的例子

    最近在做小程序的项目,由于用户需求在进入页面时进行选则角色,然后再进入小程序,这时看到的底部菜单看到的不一样,而我们都知道原生的tabBar是不支持这种做法的.在网上搜集了海量资料后发现无非两种解决方法:1.是建立模板,可是会有不能忍受的抖动:2.是利用小程序的组件开发:但是项目已经进行了一般,不可能再进行大的改变: 怎么办呢?? 无意在一条评论中发现说微信官方已经提供该组件,于是在小程序文档中寻找很久才在一个犄角旮旯找到:地址链接. 先看效果图: 1.首先看一下官方用法 这是几个非常重要你需要

  • vue不操作dom实现图片轮播的示例代码

    本文介绍了vue不操作dom实现图片轮播的示例代码,分享给大家,具体如下: 效果 宽度为1190px且水平居中的轮播盒子: 中间是当前显示的默认尺寸图片: 左右两边是预显示的小尺寸图片: 轮播从右至左,图片逐渐放大. 做普通平滑轮播也可以参照这个思路 html <ul> <li v-for="(demo,index) in demoList" :key="index" :class="{'demo-left':demoStyle(inde

  • React实现阿里云OSS上传文件的示例

    简介 阿里云 OSS 是 阿里云提供的海量.安全.低成本.高可靠的云存储服务,提供 99.9999999999%的数据可靠性(号称).能够使用 RESTful API 可以在互联网任何位置存储和访问,支持容量和处理能力弹性扩展. 基本术语 1.bucket :类似本地的一个文件夹 2.object : oss 存储数据的基本单元,类似本地的一个文件. 3.region:oss 存储的数据中心所在区域 4.Endpoint:oss 对外服务的访问域名,oss 以 http api 提供服务,不同

随机推荐