javascript - 修复 JS 粘性标题故障

Question

已经有一些关于此的帖子，并且有一个答案解决了我遇到的问题，但修复不适用于我的设置。 ( Existing Post 1 ) ( Existing Post 2 )

-

我使用一些 JS 创建了一个 div，当用户滚动浏览器窗口时它会粘在浏览器窗口的顶部。当用户滚动经过父元素时，该设置通过将类 .sticky 应用于现有父容器 #stickywrapperaa 来工作。这是 JS:

<script>
jQuery(document).ready(function( $ ) {
   // Cache selectors outside callback for performance. 
   var $window = $(window),
       $stickyEl = $('#stickywrapperaa'),
       elTop = $stickyEl.offset().top;

   $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    });
});
</script>

这将创建 #stickywrapperaa.sticky 的元素 ID/类属性，然后我使用 CSS 对其进行定位和设置样式。 目前所有这些都有效。

---

问题:

我遇到的问题是，当粘性标题被激活时，这会删除页面高度的一部分，并导致静态页面内容跳起与父容器相同的高度(#stickywrapperaa ).

从逻辑上讲，这是完全合理的，因为容器已移至静态页面内容之上，因此它现在从页面内容中消失了；然而，这会在我的页面上留下一个缺口，我现在需要填补这个缺口。

我考虑过创建一个与父容器 (#stickywrapperaa) 等高的空白空间，并触发它与粘性类一起出现，从而有效地用空白空间替换标题所在的位置.

谁能帮我实现这个或提供更好的解决方案？

Answer 1

切换粘性类时向主体添加填充顶部。填充应与标题的高度相同。

<script>
jQuery(document).ready(function( $ ) {
   // Cache selectors outside callback for performance. 
   var $window = $(window),
       $stickyEl = $('#stickywrapperaa'),
       elTop = $stickyEl.offset().top;

   $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
        if ($window.scrollTop() > elTop){
            $("body").css("padding-top", $stickyEl.height());
        } else {
            $("body").css("padding-top", 0);
        }
    });
});
</script>