操作真实DOM实现动态吸底的一个例子

动态吸底：在开始时，固定在页上，固定部分在书页从底部滚到一定距离时固定。

这是计算页面滚动条的需要，如果使用jQuery或原生js实现很好实现，但由于使用DOM不建议反应，但如果使用虚拟DOM无法达到这种效果，那么我们应该引入js直接获取DOM的操作。

反应完成后componentdidmount页面渲染，所以你可以直接使用js原生方法得到的DOM元素，然后操作。


componentdidmount（）{
This.changeFixed（）
}
计算高度
ChangeFixed（）{
/ / getdomnode
const layoutnode = document.queryselectorall（'页面'）{ 0 }；
const orderpricenode = document.queryselectorall（'。测试价格）{ 0 }；
Window.addEventListener（'scroll功能（e）{
const windowinnerheight = window.innerheight；
const layoutnodeheight = layoutnode.offsetheight；
超视距
让scrollTop =窗口。pageyoffset | | document.documentelement.scrolltop document.body.scrolltop | |；
const distancebottom = layoutnodeheight - scrollTop - windowinnerheight；
当 120吮吸底部时
如果（distancebottom <= 120）{
orderpricenode.classlist.remove（固定的）；
其他{ }
orderpricenode.classlist.add（固定的）；
}
}）
}



这使得当底部为120时可以吮吸底部。



以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。