Javascript 修复JS粘性割台故障

关于这个问题已经有一些帖子了，其中一个答案解决了我遇到的问题，但是我的设置无法修复。 () （）

-

我使用了一些JS创建了一个div，当用户滚动通过它时，它会附着在浏览器窗口的顶部。当用户滚动通过父元素时，设置程序将类

.sticky

应用于现有父容器

#stickywrappera

。以下是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>

jQuery（文档）.ready（函数（$）{
//缓存回调外的选择器以提高性能。
变量$window=$（window），
$stickyEl=$（“#stickywrapperaa”），
elTop=$stickyEl.offset（）.top；
$window.scroll（函数（）{
$stickyEl.toggleClass（'sticky'，$window.scrollTop（）>elTop）；
});
});

这将创建

#stickywrappera.sticky

的元素ID/class属性，然后我使用CSS对其进行了定位和样式设置到目前为止，所有这些都在发挥作用

---

问题：

我遇到的问题是，当激活粘性标题时，会删除页面高度的一部分，并导致静态页面内容跳转到与父容器相同的高度（

#stickywrapperaa

）

从逻辑上讲，这是非常有意义的，因为容器已经被移动到静态页面内容的顶部，所以它现在从页面内容中消失了；然而，这在我的页面上留下了一个缺口，我现在需要填补这个缺口

我考虑创建一个与父容器高度相等的空空间（

#stickywrapperaa

），并触发该空空间与sticky类一起出现，从而有效地用空空间替换以前的标题位置

---

有人能帮我实现这一点或提供更好的解决方案吗？

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

---

虽然稍后添加具有高度的div可能会起作用，但如果您可以将其放在第一位，并从正常流程中删除可见div，则会使事情变得过于复杂。

在切换sticky类时向body添加填充顶部。填充物的高度应与收割台的高度相同

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

jQuery（文档）.ready（函数（$）{
//缓存回调外的选择器以提高性能。
变量$window=$（window），
$stickyEl=$（“#stickywrapperaa”），
elTop=$stickyEl.offset（）.top；
$window.scroll（函数（）{
$stickyEl.toggleClass（'sticky'，$window.scrollTop（）>elTop）；
如果（$window.scrollTop（）>elTop）{
$（“body”）.css（“padding top”，$stickyEl.height（））；
}否则{
$（“body”）.css（“padding top”，0）；
}
});
});

切换粘滞类时，在主体上添加一个填充顶部。填充物的高度应与收割台的高度相同。