2022-06-08 react 超过指定高度，固定显示元素

前言：做一个购物车页面，底部有个结算栏，这个结算栏的要求是当页面出现滚动条，无法一页展示全部内容时固定显示结算栏，否则反之（具体可参照京东的购物车）。

我这个是antd+react搭建的管理后台，那么我们需要两个代码块就可以实现：

    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll, true);
    }
    handleScroll = (e) => {
        if (document.getElementById('footer')) {
            let clientHeight2 = document.getElementById('footer').clientHeight;
            let ctx = this;
            let a = e.srcElement.clientHeight - clientHeight2 - 44;
            if (e.srcElement.scrollTop > a || e.srcElement.scrollTop == a) {
              ctx.setState({ style: { position: "relative", } })
            } else {
              ctx.setState({ style: { position: "fixed", } })
            }
        }
    }    

注：footer是购物车底部的一个元素，结算栏固定的高度需要用页面的可视区域高度减去footer元素的可视区域高度再减去结算栏本身元素的高度（简称x高度）。

当滚动条高度大于这个x高度则令结算栏样式改为固定显示，这个style变量需要写在结算栏的样式里。

再补充一点：

handleScroll方法里面增加的这个if判断是为了防止你在当前页面滚动后跳转到别的页面，接着又返回来会报：

document.getElementById('footer').clientHeight 为 null 的情况，这大概是因为获取不到footer元素节点而报的错。