当前位置： 移动技术网 > IT编程>开发语言>JavaScript > React操作真实DOM实现动态吸底部的示例

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网