javascript - 将位置从固定更改为相对或相反会导致布局偏移 (CLS)

Question

我正在使用以下代码使侧边栏上的一些小部件对特定滚动具有粘性，并且效果很好

    <script>
        window.onscroll = function () {
            myFunction();
        };
        function between(x, min, max) {
            return x > min && x <= max;
        }

        function myFunction() {
            var w = actualWidth = window.innerWidth ||
                    document.documentElement.clientWidth ||
                    document.body.clientWidth ||
                    document.body.offsetWidth;
           
            var hest = document.documentElement.scrollTop;
            var element = document.getElementById("mySidebar");               
            element.style.width = element.offsetWidth + 'px';
            
            if ((w <= 992) || (hest <= 875)) {
                element.style.position = "";
                element.style.top = "";
                return;
            }
            if (between(hest, 875, 2875)) {
                element.style.position = "fixed";
                element.style.top = "10px";
            }
            if (between(hest, 2875, 3855)) {
                element.style.position = "relative";
                element.style.top = "2015px";
            }
            if
                    (between(hest, 3855, 4855)) {
                element.style.position = "fixed";
                element.style.top = "-980px";
            }
            if
                    (between(hest, 4855, 6170)) {
                element.style.position = "relative";
                element.style.top = "3000px";
            }
            if
                    (between(hest, 6170, 6945)) {
                element.style.position = "fixed";
                element.style.top = "-2310px";
            }
            if
                    (between(hest, 6945, 8190)) {
                element.style.position = "relative";
                element.style.top = "3785px";
            }
            if
                    (between(hest, 8190, 9545)) {
                element.style.position = "fixed";
                element.style.top = "-3510px";
            }
            if
                    (between(hest, 9545, 10860)) {
                element.style.position = "relative";
                element.style.top = "5175px";
            }
            if (hest > 10860) {
                element.style.position = "fixed";
                element.style.top = "-4814px";
            }
        };
    </script>

问题是在滚动时，它会导致布局偏移。特别是当位置从固定变为相对或相对于固定时。

我使用粘性而不是固定，但我仍然得到了相同的布局转变。

如何修复此 CLS？

问候，

标签： javascriptlighthousegoogle-search-consolepagespeed-insightsweb-performance