动态吸底:在开始时,固定在页上,固定部分在书页从底部滚到一定距离时固定。
这是计算页面滚动条的需要,如果使用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时可以吮吸底部。
以上是本文的全部内容,希望能对您有所帮助,希望大家多多
支持。