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 / class属性，然后我使用CSS定位和设置样式。 到目前为止所有这些工作正在进行中。

问题：

我遇到的问题是，当粘贴标头被激活时，它会删除页面高度的一部分，并使静态页面内容跳起与父容器（#stickywrapperaa）相同的高度。

从逻辑上讲，这是非常有意义的，因为容器已被移动到静态页面内容的顶部，因此它现在从页面内容中丢失;然而，这在我的页面中留下了一个漏洞，我现在需要填补。

我考虑过创建一个与父容器（#stickywrapperaa）高度相等的空白空间，然后触发它与粘性类一起出现，有效地替换了空标题所在的位置。

任何人都可以帮助我实现这一目标或提供更好的解决方案吗？

Answer 1

设置被移除的div的位置为绝对值，同时创建另一个设置为relative的不可见div，并且其高度与绝对div相同。

虽然稍后在div中添加高度可能会有效，但是当你可以把它放在第一个位置时它会过于复杂，并从正常流中删除可见的div。

Answer 2

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

<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粘贴标题故障

2 个答案: