javascript - 当导航栏固定时添加边距

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>

所以我想添加一个类，它为 slider 提供边距或为元素提供填充。

我不是 javascript 专家，所以我很高兴它到目前为止能正常工作:)

Answer 1

当用户向下滚动到它时(或通过调整窗口大小使导航位于顶部)，让您的脚本将主体上的填充设置为等于 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>