vue element 表头吸顶 并且可以随着大盒子左右滚动

当前需求是

1.整个页面可以垂直滚动

2.整个红盒子可以横向滚动（横向滚动时上面的盒子固定不动）

3.上面的盒子高度不固定

4. 垂直滚动时table的表头到达顶部时吸顶,表头吸顶时也可以随盒子横向滚动。

解决方案：

需求1 不提。

需求2 红盒子横向滚动 不提。上面的盒子固定不动 需要使用sticky粘性定位。

需求3 高度不固定会对需求2以及需求4有影响。

需求4 因为我的table头不仅要吸顶 还要可以横向滚动 所以动态给表头添加position :fixed 明显就不合理了。需要给它添加position:absolute;因为继续往下滚动 如果top值固定的话 父盒子已经滚上去了 所以top值也要动态添加。然后就OK了。

动态加top可以解决吸顶的问题。使用position:absolute可以解决横向滚动的问题。

附代码：

// 监听滚动条事件

document.addEventListener("scroll", (e) => {

/**

* table 头 吸顶

*/

// 获取滚动条滚动的高度 

let scrollTop = e.target.scrollTop;

// 先获取父盒子的距离顶部的高度，从而算出子盒子的高度。

let offsetTop = document.getElementsByClassName('pro-det-bottom')[0].offsetTop;

// 当子盒子距离顶部的距离 小于滚动的高度，使子盒子吸顶。

if(scrollTop > (offsetTop+30)){

// 判断当前是否已经固定。headerStatus优化值 可有可无。

if(!this.headerStatus){

this.headerStatus = true;

// 当前子盒子要在父盒子中横向滚动 所以使用absolute 绝对定位。

document.getElementsByClassName('el-table__header-wrapper')[0].style.position = "absolute";

document.getElementsByClassName('el-table__header-wrapper')[0].style.zIndex = "500"

}

// 绝对定位 top值需要一直改变 所以动态添加top值

let top = scrollTop-(offsetTop+30);

document.getElementsByClassName('el-table__header-wrapper')[0].style.transform = `translate3d(0px, ${top}px, 0px)`

}else{

this.headerStatus = false;

document.getElementsByClassName('el-table__header-wrapper')[0].style.transform = `translate3d(0px, 0px, 0px)`

}

},true)

 效果图：