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>

所以我想添加一个类，它给滑块一个边距或元素一个填充。

我不是javascript的专家，所以我很高兴它到目前为止工作：）

Answer 1

您可以使用general sibling选择器选择文章。它看起来像这样：

.fixed ~ #slider {}

重要的是要注意，一般兄弟只会在第一个元素之后选择项目。您的选择器无法遍历DOM。

Answer 2

当用户向下滚动时，让你的脚本在主体上设置填充等于$(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()); } });的（当前）高度（或者通过调整窗口大小使导航位于顶部。）< / p>

＆＃13;

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

＆＃13;

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

＆＃13;

Order.all

＆＃13;

导航栏固定后添加边距

2 个答案: