當導航欄變得固定時添加一個邊距

所以問題是，我想在導航頭消失時使導航條固定。一切工作正常，但問題是，在導航欄得到修復後，文章就在它下面。我想解決這個問題，但是我想在導航欄修復時添加填充或邊距。當導航欄變得固定時添加一個邊距

我的代碼：

的Html

<div id="headwrapper"> 
    <header> 
     <img src="Logo.png"> 
     <h1>IT TECH</h1> 
    </header> 
</div> 
<nav> 
    <div id="selector"></div> 
    <a class="link1" href="home.htm"> 
     <p>Home</p> 
    </a> 
    <a class="link2" href="talen.htm"> 
     <p>Programmeertalen</p> 
    </a> 
    <a class="link3" href="computer.htm"> 
     <p>Computers</p> 
    </a> 
    <a class="link4" href="richting.htm"> 
     <p>Richtingen</p> 
    </a> 
    <a class="link5" href="contact.htm"> 
     <p>Contact</p> 
    </a> 
</nav> 
<div id="element"> 
    <div id="slider"> 
     <div title="Banaan" id="foto1"> 
      <h1>Welcome to</h1><img src="Logo.png"> 
      <h1>IT TECH</h1></div> 
     <div title="Peren" id="foto2"></div> 
     <div title="Kiwi's" id="foto3"></div> 
     <div title="Aardbeien" id="foto4"></div> 
    </div> 
</div> 
<article></article>

，所以我想添加一類使滑塊保證金或元素的填充。

我不親用JavaScript，所以我很高興它的工作原理到目前爲止:)

來源

2016-12-05 H. Rooij

類添加到您的身體* *標記，然後你可以寫你需要的任何元素是什麼風格：'body.fixed導航{...}'和'body.fixed #slider {...}' –

如果你想操縱多個元素樣式（如標題和滑塊），也許最好添加c對身體不起作用，並根據該身體類別製作CSS。希望這可能會有所幫助。 –

讓你的腳本中設置填充對身體等於nav的（目前的）高度，當用戶向下滾動到它（或使導航通過調整窗口是在頂部）。

$(window).bind('scroll resize', function() { 
 
    var $nav = $('nav'), 
 
     $body = $('body'); 
 
    $nav.removeClass('fixed'); 
 
    $body.css('padding-top',0); 
 
    if ($(window).scrollTop() > $nav.offset().top) { 
 
     $nav.addClass('fixed'); 
 
     $body.css('padding-top',$nav.outerHeight());  
 
    } 
 
});

html, body {margin:0;} 
 
nav {display:block; background:#eee; width:100%;} 
 
nav.fixed {position:fixed; top:0;} 
 
nav a {display:inline-block; padding:10px;} 
 
#foto1 img {width:100%}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="headwrapper"> 
 
    <header> 
 
     <img src="https://placekitten.com/50/50"> 
 
     <h1>IT TECH</h1> 
 
    </header> 
 
</div> 
 
<nav> 
 
    <div id="selector"></div> 
 
    <a class="link1" href="home.htm"> 
 
     <p>Home</p> 
 
    </a> 
 
    <a class="link2" href="talen.htm"> 
 
     <p>Programmeertalen</p> 
 
    </a> 
 
    <a class="link3" href="computer.htm"> 
 
     <p>Computers</p> 
 
    </a> 
 
    <a class="link4" href="richting.htm"> 
 
     <p>Richtingen</p> 
 
    </a> 
 
    <a class="link5" href="contact.htm"> 
 
     <p>Contact</p> 
 
    </a> 
 
</nav> 
 
<div id="element"> 
 
    <div id="slider"> 
 
     <div title="Banaan" id="foto1"> 
 
      <h1>Welcome to</h1><img src="https://placekitten.com/50/50"> 
 
      <h1>IT TECH</h1></div> 
 
     <div title="Peren" id="foto2"></div> 
 
     <div title="Kiwi's" id="foto3"></div> 
 
     <div title="Aardbeien" id="foto4"></div> 
 
    </div> 
 
</div> 
 
<article></article>

來源

2016-12-05 20:45:56 Moob

似乎在Chrome和Firefox中運行良好，在Safari中使用小型FOUC –

可以使用general sibling選擇器選擇的文章。它應該是這樣的：

.fixed ~ #slider {}

需要注意的是，一般的兄弟姐妹將只選擇第一個元素之後的項目是非常重要的。您的選擇器無法遍歷DOM。

來源

2016-12-05 20:41:58 CaldwellYSR

優雅使用兄弟選擇器 –

當導航欄變得固定時添加一個邊距

回答

相關問題