将 margin-top 添加到兄弟 div 条件是顶部兄弟具有固定位置

Question

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

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

我想要的是，将规则'固定位置添加到 header class 并将其固定到它存在的那些页面的页面顶部并给它一个白色背景跨越 window。现在，当我这样做时，div 中内容为 class 的内容位于 header 之下。但是，我希望该内容具有上边距，并且仅在 header 存在的页面上位于 header div 下方。

我知道我可以为内容 class 添加上边距或边距，但这会影响包含内容 class 的所有页面，但我不希望这种情况发生？

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

Answer 1

这也有效...

添加包装器 div (header-wrapper) 并将 header div 嵌套在其中。

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

相对于仪表板放置包装器 header 并向其添加 margin-bottom。然后，给header.

一个固定的位置

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

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

Answer 2

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

检查这个片段

.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;
    }
  }
}

希望对您有所帮助

Answer 3

您可以轻松地用另一个 class 来操纵它。我添加了一些 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");
    }
  });
});

将 margin-top 添加到兄弟 div 条件是顶部兄弟具有固定位置

Add a margin-top to a sibling div on condition that a top sibling has a fixed position

html

css

compass-sass