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

问题描述

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

    <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？

问候，

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）