在顶部同级具有固定位置的情况下，将 margin-top 添加到同级 div答案

【问题标题】：Add a margin-top to a sibling div on condition that a top sibling has a fixed position在顶部同级具有固定位置的情况下，将 margin-top 添加到同级 div
【发布时间】：2016-11-24 04:47:46
【问题描述】：

仪表板和内容类在应用程序中是通用的（这意味着它们位于每个模板或页面上）。标头类仅在某些页面上可用。

<div class="dashboard">
      <div class="header"></div>
      <div class="content"></div>
    </div>

我想要的是，将规则“固定位置”添加到标题类，并将其固定到它存在的那些页面的页面顶部，并在窗口中为其提供白色背景。现在，当我这样做时，具有内容类的 div 内的内容将位于标题下方。但是，我希望该内容具有上边距，并且仅位于存在标题的页面上的标题 div 下。

我知道我可以向内容类添加顶部填充或边距，但这会影响具有该内容类的所有页面，但我不希望这种情况发生？

我怎样才能有条件地实现这个目标？

【问题讨论】：

标签： html css compass-sass

【解决方案1】：

我认为对于标题后跟内容的页面，您可以将样式应用为 .header ~ .content 而对于其他页面，您可以将其样式设置为 .content

检查这个sn-p

.header{
  position:fixed;
  background:red;
  left:0;
  top:0;
  width:100%;
}
.header ~ .content{
  margin-top:50px;
  background:gray;
}

<div class="dashboard">
  <div class="header">khfdsfjksd</div>
  <div class="content">
    Lorem ipsum dolor sit amet, facilisis orci, risus accumsan mauris mi aliquam, mattis felis, condimentum vel arcu pellentesque vulputate et scelerisque. A mi ut arcu nunc odio, nunc aliquam, vel libero orci bibendum pellentesque. Placeat eget mauris tortor dignissim habitant, viverra nunc urna in. Massa lectus mauris felis nibh. Non imperdiet ut, cum vivamus soluta porta sed, quisque erat diam blandit dolor.Lorem ipsum dolor sit amet, facilisis orci, risus accumsan mauris mi aliquam, mattis felis, condimentum vel arcu pellentesque vulputate et scelerisque. A mi ut arcu nunc odio, nunc aliquam, vel libero orci bibendum pellentesque. Placeat eget mauris tortor dignissim habitant, viverra nunc urna in. Massa lectus mauris felis nibh. Non imperdiet ut, cum vivamus soluta porta sed, quisque erat diam blandit dolor.Lorem ipsum dolor sit amet, facilisis orci, risus accumsan mauris mi aliquam, mattis felis, condimentum vel arcu pellentesque vulputate et scelerisque. A mi ut arcu nunc odio, nunc aliquam, vel libero orci bibendum pellentesque. Placeat eget mauris tortor dignissim habitant, viverra nunc urna in. Massa lectus mauris felis nibh. Non imperdiet ut, cum vivamus soluta porta sed, quisque erat diam blandit dolor.
  </div>
</div>

<div class="content">
  sfhdskfdsk
</div>

在 SCSS 中你的代码应该是这样的

.dash-board {
  .header {
    position: fixed;
    background: red;
    left: 0;
    top: 0;
    width: 100%;
    ~ .content {
      margin-top: 50px;
      background: gray;
    }
  }
}

希望对你有帮助

【讨论】：

很好，但是，我使用的是 sass，并且我有元素特定的 scss 文件。

【解决方案2】：

您可以使用其他类轻松操作它。我添加了一些 jQuery 进行演示……但我希望你的问题是正确的。检查这个fiddle out。

$(function() {
  var $button = $("button");
  var $header = $(".header");
  var $content = $(".content");

  $button.on("click", function() {
    if ($button.hasClass("active")) {
        $button.removeClass("active");
      $header.removeClass("active");
      $content.removeClass("active");
    } else {
        $button.addClass("active");
      $header.addClass("active");
      $content.addClass("active");
    }
  });
});

【讨论】：

我没有使用 jquery。参见上面的纯 css 解决方案。谢谢。
是的，我知道。 jQuery 仅用于演示，它说您应该使用一个类来隐藏“标题”。

【解决方案3】：

这也有效...

添加一个包装器div（header-wrapper）并将header div嵌套在里面。

<div class="dashboard">
    <div class="header-wrapper">
      <div class="header"></div>
    </div>      
    <div class="content"></div>
</div>

相对于仪表板定位包装器标题并为其添加边距底部。然后，给header一个固定的位置。

.header-wrapper {
  positon: relative;
  height: 50px;
  margin-bottom: 50px;
}

.header {
  position: fixed;
  // additional rules
}

【讨论】：