导航栏固定后添加边距

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>