add a margin when the navbar becomes fixed

Question

So the problem is, I want to make my nav fixed when the header disappeared. everything works fine but the problem is that after the navbar got fixed the article goes under it. and I want to fix that but i want the padding or margin to be added when the navbar is fixed.

my code:

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

so i want to add a class which gives the slider a margin or the element a padding.

I am not the pro with javascript so I am happy it works so far :)

Answer 1

You can use the general sibling selector to select the article. It would look like this:

.fixed ~ #slider {}

It's important to note that the general sibling will only select items AFTER the first element. Your selector cannot traverse back up the DOM.

Answer 2

Have your script set the padding on the body equal to the (current) height of the nav when the user scrolls down to it (or causes the nav to be at the top by resizing the window.)

 $(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>