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

操作真实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时可以吮吸底部。
以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部