如何防止粘性元素影响下一个元素的高度？

Question

我目前正在开发一个网络项目，我在页面上放置了一个粘性元素。但是，我遇到一个问题，当粘性元素变得粘性时，它似乎会影响下一个元素的高度。有没有办法阻止这种行为？

我尝试过各种CSS属性和方法，例如设置position: Sticky以及调整边距和填充，但还没有找到令人满意的解决方案。理想情况下，我希望粘性元素保持其位置，而不会导致任何布局变化或影响后续元素的高度。

任何有关如何实现这一目标的见解或建议将不胜感激。谢谢！

在尝试解决粘性元素影响后续元素高度的问题时，我尝试了各种 CSS 属性和调整。首先，我将

position: sticky

应用于粘性元素，并调整其边距和填充，看看是否可以缓解问题。

我的期望是，通过使用

position: sticky

，元素将保持其相对于视口的位置，并且不会影响页面上其他元素的布局。此外，我预计调整边距和填充可能有助于在粘性元素周围创建空间，进一步防止它影响后续元素的高度。

但是，尽管做出了这些努力，我仍然遇到粘性元素似乎影响下一个元素的高度的问题。我正在寻求见解或替代方法来有效防止这种行为，同时保持元素的粘性定位。

Answer 1

$(window).on("load resize",function(){
    if (window.innerWidth > 991) {
        let titleHeight = parseFloat($(".empower-title h2").height()) + parseFloat($(".empower-title").css("top").replace('px', '')) + parseFloat($(".empower-title h2").css("margin-bottom").replace('px', ''));
        $('.sticky-cards>div').each(function(index) {
            $(this).css('top', titleHeight + (index * 10) + 'px');
        });
    } else {
        $(".zwc-scroll-tab").css("top", "0px");
    }
});
$(window).scroll(function () {
    let height = parseFloat($(".empower-title h2").height()) + parseFloat($(".empower-title h2").css("margin-bottom").replace('px', '')) + $(".zwc-scroll-tab:last-child()").height();
    if (window.innerWidth > 991) {
        if ($(".zwc-empower-scroll").offset().top + 1000 < $(window).scrollTop()) {
            $(".empower-title").css("height", height);
        } else {
            $(".empower-title").css("height", "auto");
        }
    } else {$(".empower-title").css("height", "auto");}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>