固定 div 滚动...需要向下推身体以补偿 div 高度？答案

【问题标题】：Fixed div on scroll... need to push body down to compensate for div height?固定 div 滚动...需要向下推身体以补偿 div 高度？
【发布时间】：2014-06-11 13:55:10
【问题描述】：

我可以将导航 div 设置为在滚动过去时固定，但是我需要扩展 jQuery 代码以将 CSS 元素添加到 body 以将其向下推 div 的高度以补偿当 div 被固定时发生的跳转。

我使用的 jQuery 代码是

var $window = $(window),
   $stickyEl = $('nav#main'),
   elTop = $stickyEl.offset().top;

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

在应用 .sticky 类时，我需要在 body 标签中添加 40px 的 margin-top。

我可以制定一个 CSS 规则，将 margin-top:40px 设置为 body，但是当 .sticky 显示时？类似于子 css 元素 (>) 的对立面？

【问题讨论】：

为什么不对粘性元素设置填充？
填充会影响粘性 div，并增加它的大小。我想将整个页面内容向下推以补偿页面返回顶部的跳转（当粘性 div 固定时）

标签： jquery css scroll fixed

【解决方案1】：

只需将你的粘性类添加到你的身体而不是你不能简单地使用

body.sticky {margin-top: 40px;}
body.sticky nav#main {poistion: fixed;}

当您删除类粘性时，两者都会重置为正常。

【讨论】：

实际上使用父元素可能是你最好的选择，因为你在做固定定位，你不应该看到任何问题与父元素没有位置：相对，但如果你最终有需要为此，您将不得不处理它，因为文档的其余部分包含在正文/父容器中。除了一点点之外，这比我所拥有的要优雅得多：P
因为当窗口滚动到设置的任何元素时，该类都适用。因此，如果我将其设置为 body，一旦窗口滚动，它就会使我的 div 跳到窗口的顶部。不过感谢您的想法！

【解决方案2】：

特异性关系仅以一种方式起作用，因此没有选择器来定位元素的父级，尽管有几种方法可以做到这一点，但我认为它们并不完全适用于您的情况。

我认为您可能想要在这里做的不是使用 toggleClass 而是手动进行检查，这样您就可以扩展您的“回调”。

$window.scroll(function() {
  if($window.scrollTop() > elTop) {
    $stickyEl.addClass('sticky');
    $(body).css("marginTop", "40px");
  } else {
    $stickyEl.removeClass('sticky');
  }
});

或者您可以只使用一个隐藏的 div 作为分隔符，然后使用一个类来显示/隐藏它，然后执行以下操作：

$window.scroll(function() {
    $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    $myHiddenDiv.toggleClass('show', $window.scrollTop() > elTop);
});

您可以尝试做的另一个选择是弄乱 :before 选择器并创建一个用作分隔符的 div。

【讨论】：

我使用了你的想法，但只是最后一部分。只需将 $myHiddenDiv 替换为 body 并切换“nav-spacer”类以添加顶部边距或 40px。谢谢！
好主意，感谢：$(body).css("marginTop", "40px");