navbarが固定になったときにマージンを追加する

Question

問題は、ヘッダーが消えたときにナビを固定したいのです。 すべて正常に動作しますが、問題はNavbarが修正された後に記事がその下に落ちるということです。私はそれを修正したいが、ナビゲーションバーが修正されたときにパディングやマージンを追加したい。

私のコード：

​​

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> 

ので、私は、スライダのマージンやパディング要素を与えるクラスを追加します。

私はので、私はそれがこれまでの作品うれしいです:)

Answer 1

スクリプトがnavたときにユーザーがスクロールそれまでの（現在の）高さと同じ体にパディングを設定している（または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>

Answer 2

あなたは記事を選択するgeneral siblingセレクタを使用することができますJavaScriptを使用してプロではありませんよ。それは次のようになります。

.fixed ~ #slider {} 

それは一般的な兄弟が最初の要素だけAFTER項目を選択することに注意することが重要です。セレクタはDOMをトラバースできません。