導航欄固定后添加邊距

Question

所以問題是，當標題消失時，我想固定我的導航。 一切正常，但問題是導航欄修復后，文章仍在下面。 並且我想修復該問題，但我想在導航欄修復后添加填充或邊距。

我的代碼：

<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script>
var num = 120; //number of pixels before modifying styles

$(window).bind('scroll', function() {
    if ($(window).scrollTop() > num) {
        $('nav').addClass('fixed');
    } else {
        $('nav').removeClass('fixed');
    }
});
</script>

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

您可以使用常規的同級選擇器來選擇文章。 它看起來像這樣：

.fixed ~ #slider {}

重要的是要注意，同級兄弟只會在第一個元素之后選擇項目。 您的選擇器無法遍歷備份DOM。

Answer 2

當用戶向下滾動時，讓腳本將正文上的填充設置為等於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>