修复 JS sticky header 故障

Question

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

-

我已经使用一些 JS 创建了一个 div，当用户滚动经过它时，它会粘在浏览器的顶部 window。该设置通过在用户滚动经过 parent 元素时将 class .sticky 应用于现有 parent 容器 #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/class 属性，然后我使用 CSS 对其进行定位和设置样式。 目前所有这些都有效。

问题：

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

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

我考虑创建一个与 parent 容器 (#stickywrapperaa) 等高的空 space 并触发它与粘性 class 一起出现，有效地替换header 以前是空的 space。

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

Answer 1

将移除的 div 的位置设置为绝对位置，同时创建另一个不可见的 div 设置为相对位置，并与绝对位置 div 高度相同.

虽然稍后添加带有高度的 div 可能会起作用，但是当您可以首先将它放在那里并从法线中删除可见的 div 时，这会使事情过于复杂流.

Answer 2

切换粘性 class 时将 padding-top 添加到 body。填充应与 header.

的高度相同

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

修复 JS sticky header 故障

Fixing JS sticky header glitch

javascript

css

wordpress

jquery

sticky