前端实现sticky布局

1、sticky吸顶布局

当元素在页面可视区域内时，元素按照初始位置正常展示。而当元素因为页面滚动超出可视区域，则元素固定在顶部。

2、 如何实现stick吸顶

1、js+css结合实现

通过监听scroll事件，当元素超出页面可视区域则设置元素 position: fixed。判断元素是否超出可视区域可通过：

• 比较offsetTop和scrollTop
• getBoundingClientRect().top

offsetTop

offsetTop 是一个只读属性，返回当前元素相对于 offsetParent 节点顶部边界的偏移像素值。在计算offsetTop时需将父级元素的偏移量也计算在内。

const getOffsetTop = (dom) => {
   
    let offsetTop = 0;
    while (dom != window.document.body && dom != null) {
   
        offsetTop += dom.offsetTop;
        dom = dom.offsetParent
    }
    return offsetTop;
}

scrollTop

scrollTop 是这个元素的内容顶部到它的视口可见内容（的顶部）的距离的度量。
当offsetTop<scrollTop时说明元素已经不在可视区域，则给元素设置position:fixed。

const scrollHandler = (e) => {
   
    const _scrollTop = window