在頂級兄弟擁有固定位置的情況下，爲兄弟分區添加邊距頂部

Question

儀表板和內容類在應用中是通用的（即它們位於每個模板或頁面上）。標題類僅在某些頁面上可用。

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

我想是，增加固定位置的頭類的法則」，並將其固定到頁面上，它存在的那些頁面頂部，並給它在窗口背景爲白色。現在，當我這樣做時，內容類中div的內容將放在標題下。但是，我希望該內容具有頂部邊距，並且只在標題存在的頁面上位於標題div下。

我知道我可以爲內容類添加頂部填充或邊距，但這會影響所有帶有內容類的頁面，但我不希望這種情況發生？

我該如何有條件地實現這一目標？

Answer 1

我認爲，你必須頭和隨後的內容頁面，你可以申請樣式，.header〜。內容和其他頁面可能是你可以風格它。內容

檢查這個片段

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

這個工作，以及...

添加一個包裝DIV（頭，包裝）和巢頭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"); 
    } 
    }); 
});