Question

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

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

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

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

我如何有条件地实现这一目标？

Answer 1

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

检查此代码段

＆＃13;

geom_ribbon(aes(ymin=flam - flam_c95, ymax=flam + flam_c95))

＆＃13;

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

＆＃13;

在SCSS中，您的代码应该是这样的

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

希望有所帮助

Answer 2

这也很有效......

添加一个包装器div（header-wrapper）并将头部div嵌套在其中。

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

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

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

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

Answer 3

您可以使用其他类轻松操作它。我添加了一些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");
    }
  });
});

在兄弟姐妹有固定位置的情况下，为兄弟div添加一个margin-top

3 个答案: