导航顶部的对象，但导航应该在对象顶部
Objects on top of nav, but nav should be on top of objects
我编写了这段代码，以便当用户访问我的网站时，导航将在他们滚动时跟随他们。它工作得很好，但很少有对象漂浮在导航顶部并且隐藏在它们后面的情况。这是一个jsfiddle。
https://jsfiddle.net/b24fgsf3/
您会注意到，当您滚动导航时，导航会在某一点快速移动到页面顶部，但 h1 标记在导航顶部仍然可见，它会短暂隐藏导航选项。很烦人，我认为这很糟糕 UX/UI。我试过位置和其他一些属性，但无法正常工作。
如有任何建议，我们将不胜感激。
这是我写的jQuery。因为显然没有它我不能 post 任何东西。
var num = 15;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('nav').addClass('fixed');
} else {
$('nav').removeClass('fixed');
}
});
将 z-index: 1 添加到 nav 以 堆叠 它在 container 的 top - 请参阅下面的演示：
var num = 35;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('nav').addClass('fixed');
} else {
$('nav').removeClass('fixed');
}
});
nav {
background-color: white;
height: 75px;
width: 100%;
z-index: 1;
}
.fixed {
position: fixed;
top: 0;
clear: both;
}
.hero {
height: 200px;
}
.hero h1 {
position: relative;
top: 50px;
width: 50%;
margin: 0 auto;
font-size: 2em;
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Blah</li>
<li>Blah</li>
</ul>
</nav>
<div class="container">
<div class="hero">
<h1>
Blah Blah Blah
</h1>
</div>
<p>
Lorem ipsum dolor sit amet, elementum nullam neque consequat aenean, odio nec, nunc non magna a ut augue et. Dolor ut est quam pharetra, duis nulla id sed sed hendrerit, a lectus sed amet venenatis. Pulvinar ante magnis eros phasellus pellentesque sed, dapibus enim, quis ac morbi eros quis, in odio enim suspendisse nulla vestibulum wisi. Leo purus neque leo quam aliquet. Lobortis mi per felis eu. Tortor in nulla primis sit, maecenas velit, ligula pellentesque dis elementum, nunc mi erat mauris vitae blandit in. Phasellus amet pulvinar neque amet convallis, nulla fusce commodo aliquam augue, amet vitae et volutpat nam, nisl id nibh morbi et. Maecenas ultrices elit nibh. Doloremque massa amet vel lacus. Eros at suspendisse vulputate nulla condimentum, dignissim velit arcu, hac diam est, amet consequat id fermentum.
Tempor eros elementum nullam nec ligula ligula. Curabitur mattis pede, lacus et eleifend, tellus sed ipsum cubilia enim, quam et fusce. Mi ligula, laoreet porttitor dignissim mauris consequat euismod ut, luctus ut, donec rhoncus mi eget. Et erat turpis pede quam donec. Integer augue, lacus metus dolor, magna condimentum. Libero leo ac varius, sodales faucibus lacus sed, pretium amet blandit sed mi neque curabitur, purus nunc sed egestas ut, quis id voluptate. Metus commodo enim, potenti orci vivamus, arcu dolor, accumsan euismod est aut sit non quam, sit leo et leo nam sociosqu non. Ante nunc integer vehicula. Nonummy dui viverra, elit morbi lectus feugiat. Ac fringilla cras tempor consectetuer consequat.
</p>
</div>
SUGGESTION: you don't need to use javascript.
您可以简单地在 css 文件上使用 position: fixed;。
并使 z-index 成为一个大值，例如：99999 高于所有其他元素。
您应该将 'container' div 放在导航栏的底部。
简单地说，对 'container' 个元素使用 relative 位置。
nav {
position: fixed;
background-color: white;
height: 75px;
width: 100%;
z-index: 99999;
}
.container{
position: relative;
top: 75px;
}
它将通过滚动跟随用户：
nav {
position: fixed;
top: 0;
background-color: black;
color:white;
height: 50px;
width: 100%;
z-index: 99999;
}
.container{
position: relative;
top: 50px;
}
nav li{
display:inline;
}
.hero {
height: 200px;
}
.hero h1 {
position: relative;
top: 50px;
width: 50%;
margin: 0 auto;
font-size: 2em;
background-color: yellowgreen;
color: white;
}
<nav>
<ul>
<li>Blah</li>
<li>Blah</li>
</ul>
</nav>
<div class="container">
<div class="hero">
<h1>
Blah Blah Blah
</h1>
</div>
<p>
Lorem ipsum dolor sit amet, elementum nullam neque consequat aenean, odio nec, nunc non magna a ut augue et. Dolor ut est quam pharetra, duis nulla id sed sed hendrerit, a lectus sed amet venenatis. Pulvinar ante magnis eros phasellus pellentesque sed, dapibus enim, quis ac morbi eros quis, in odio enim suspendisse nulla vestibulum wisi. Leo purus neque leo quam aliquet. Lobortis mi per felis eu. Tortor in nulla primis sit, maecenas velit, ligula pellentesque dis elementum, nunc mi erat mauris vitae blandit in. Phasellus amet pulvinar neque amet convallis, nulla fusce commodo aliquam augue, amet vitae et volutpat nam, nisl id nibh morbi et. Maecenas ultrices elit nibh. Doloremque massa amet vel lacus. Eros at suspendisse vulputate nulla condimentum, dignissim velit arcu, hac diam est, amet consequat id fermentum.
Tempor eros elementum nullam nec ligula ligula. Curabitur mattis pede, lacus et eleifend, tellus sed ipsum cubilia enim, quam et fusce. Mi ligula, laoreet porttitor dignissim mauris consequat euismod ut, luctus ut, donec rhoncus mi eget. Et erat turpis pede quam donec. Integer augue, lacus metus dolor, magna condimentum. Libero leo ac varius, sodales faucibus lacus sed, pretium amet blandit sed mi neque curabitur, purus nunc sed egestas ut, quis id voluptate. Metus commodo enim, potenti orci vivamus, arcu dolor, accumsan euismod est aut sit non quam, sit leo et leo nam sociosqu non. Ante nunc integer vehicula. Nonummy dui viverra, elit morbi lectus feugiat. Ac fringilla cras tempor consectetuer consequat.
</p>
<p>
Lorem ipsum dolor sit amet, elementum nullam neque consequat aenean, odio nec, nunc non magna a ut augue et. Dolor ut est quam pharetra, duis nulla id sed sed hendrerit, a lectus sed amet venenatis. Pulvinar ante magnis eros phasellus pellentesque sed, dapibus enim, quis ac morbi eros quis, in odio enim suspendisse nulla vestibulum wisi. Leo purus neque leo quam aliquet. Lobortis mi per felis eu. Tortor in nulla primis sit, maecenas velit, ligula pellentesque dis elementum, nunc mi erat mauris vitae blandit in. Phasellus amet pulvinar neque amet convallis, nulla fusce commodo aliquam augue, amet vitae et volutpat nam, nisl id nibh morbi et. Maecenas ultrices elit nibh. Doloremque massa amet vel lacus. Eros at suspendisse vulputate nulla condimentum, dignissim velit arcu, hac diam est, amet consequat id fermentum.
Tempor eros elementum nullam nec ligula ligula. Curabitur mattis pede, lacus et eleifend, tellus sed ipsum cubilia enim, quam et fusce. Mi ligula, laoreet porttitor dignissim mauris consequat euismod ut, luctus ut, donec rhoncus mi eget. Et erat turpis pede quam donec. Integer augue, lacus metus dolor, magna condimentum. Libero leo ac varius, sodales faucibus lacus sed, pretium amet blandit sed mi neque curabitur, purus nunc sed egestas ut, quis id voluptate. Metus commodo enim, potenti orci vivamus, arcu dolor, accumsan euismod est aut sit non quam, sit leo et leo nam sociosqu non. Ante nunc integer vehicula. Nonummy dui viverra, elit morbi lectus feugiat. Ac fringilla cras te
</div>
我编写了这段代码，以便当用户访问我的网站时，导航将在他们滚动时跟随他们。它工作得很好，但很少有对象漂浮在导航顶部并且隐藏在它们后面的情况。这是一个jsfiddle。
https://jsfiddle.net/b24fgsf3/
您会注意到，当您滚动导航时，导航会在某一点快速移动到页面顶部，但 h1 标记在导航顶部仍然可见，它会短暂隐藏导航选项。很烦人，我认为这很糟糕 UX/UI。我试过位置和其他一些属性，但无法正常工作。
如有任何建议，我们将不胜感激。
这是我写的jQuery。因为显然没有它我不能 post 任何东西。
var num = 15;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('nav').addClass('fixed');
} else {
$('nav').removeClass('fixed');
}
});
将 z-index: 1 添加到 nav 以 堆叠 它在 container 的 top - 请参阅下面的演示：
var num = 35;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('nav').addClass('fixed');
} else {
$('nav').removeClass('fixed');
}
});
nav {
background-color: white;
height: 75px;
width: 100%;
z-index: 1;
}
.fixed {
position: fixed;
top: 0;
clear: both;
}
.hero {
height: 200px;
}
.hero h1 {
position: relative;
top: 50px;
width: 50%;
margin: 0 auto;
font-size: 2em;
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Blah</li>
<li>Blah</li>
</ul>
</nav>
<div class="container">
<div class="hero">
<h1>
Blah Blah Blah
</h1>
</div>
<p>
Lorem ipsum dolor sit amet, elementum nullam neque consequat aenean, odio nec, nunc non magna a ut augue et. Dolor ut est quam pharetra, duis nulla id sed sed hendrerit, a lectus sed amet venenatis. Pulvinar ante magnis eros phasellus pellentesque sed, dapibus enim, quis ac morbi eros quis, in odio enim suspendisse nulla vestibulum wisi. Leo purus neque leo quam aliquet. Lobortis mi per felis eu. Tortor in nulla primis sit, maecenas velit, ligula pellentesque dis elementum, nunc mi erat mauris vitae blandit in. Phasellus amet pulvinar neque amet convallis, nulla fusce commodo aliquam augue, amet vitae et volutpat nam, nisl id nibh morbi et. Maecenas ultrices elit nibh. Doloremque massa amet vel lacus. Eros at suspendisse vulputate nulla condimentum, dignissim velit arcu, hac diam est, amet consequat id fermentum.
Tempor eros elementum nullam nec ligula ligula. Curabitur mattis pede, lacus et eleifend, tellus sed ipsum cubilia enim, quam et fusce. Mi ligula, laoreet porttitor dignissim mauris consequat euismod ut, luctus ut, donec rhoncus mi eget. Et erat turpis pede quam donec. Integer augue, lacus metus dolor, magna condimentum. Libero leo ac varius, sodales faucibus lacus sed, pretium amet blandit sed mi neque curabitur, purus nunc sed egestas ut, quis id voluptate. Metus commodo enim, potenti orci vivamus, arcu dolor, accumsan euismod est aut sit non quam, sit leo et leo nam sociosqu non. Ante nunc integer vehicula. Nonummy dui viverra, elit morbi lectus feugiat. Ac fringilla cras tempor consectetuer consequat.
</p>
</div>
SUGGESTION: you don't need to use javascript.
您可以简单地在 css 文件上使用 position: fixed;。
并使 z-index 成为一个大值，例如：99999 高于所有其他元素。
您应该将 'container' div 放在导航栏的底部。
简单地说，对 'container' 个元素使用 relative 位置。
nav {
position: fixed;
background-color: white;
height: 75px;
width: 100%;
z-index: 99999;
}
.container{
position: relative;
top: 75px;
}
它将通过滚动跟随用户：
nav {
position: fixed;
top: 0;
background-color: black;
color:white;
height: 50px;
width: 100%;
z-index: 99999;
}
.container{
position: relative;
top: 50px;
}
nav li{
display:inline;
}
.hero {
height: 200px;
}
.hero h1 {
position: relative;
top: 50px;
width: 50%;
margin: 0 auto;
font-size: 2em;
background-color: yellowgreen;
color: white;
}
<nav>
<ul>
<li>Blah</li>
<li>Blah</li>
</ul>
</nav>
<div class="container">
<div class="hero">
<h1>
Blah Blah Blah
</h1>
</div>
<p>
Lorem ipsum dolor sit amet, elementum nullam neque consequat aenean, odio nec, nunc non magna a ut augue et. Dolor ut est quam pharetra, duis nulla id sed sed hendrerit, a lectus sed amet venenatis. Pulvinar ante magnis eros phasellus pellentesque sed, dapibus enim, quis ac morbi eros quis, in odio enim suspendisse nulla vestibulum wisi. Leo purus neque leo quam aliquet. Lobortis mi per felis eu. Tortor in nulla primis sit, maecenas velit, ligula pellentesque dis elementum, nunc mi erat mauris vitae blandit in. Phasellus amet pulvinar neque amet convallis, nulla fusce commodo aliquam augue, amet vitae et volutpat nam, nisl id nibh morbi et. Maecenas ultrices elit nibh. Doloremque massa amet vel lacus. Eros at suspendisse vulputate nulla condimentum, dignissim velit arcu, hac diam est, amet consequat id fermentum.
Tempor eros elementum nullam nec ligula ligula. Curabitur mattis pede, lacus et eleifend, tellus sed ipsum cubilia enim, quam et fusce. Mi ligula, laoreet porttitor dignissim mauris consequat euismod ut, luctus ut, donec rhoncus mi eget. Et erat turpis pede quam donec. Integer augue, lacus metus dolor, magna condimentum. Libero leo ac varius, sodales faucibus lacus sed, pretium amet blandit sed mi neque curabitur, purus nunc sed egestas ut, quis id voluptate. Metus commodo enim, potenti orci vivamus, arcu dolor, accumsan euismod est aut sit non quam, sit leo et leo nam sociosqu non. Ante nunc integer vehicula. Nonummy dui viverra, elit morbi lectus feugiat. Ac fringilla cras tempor consectetuer consequat.
</p>
<p>
Lorem ipsum dolor sit amet, elementum nullam neque consequat aenean, odio nec, nunc non magna a ut augue et. Dolor ut est quam pharetra, duis nulla id sed sed hendrerit, a lectus sed amet venenatis. Pulvinar ante magnis eros phasellus pellentesque sed, dapibus enim, quis ac morbi eros quis, in odio enim suspendisse nulla vestibulum wisi. Leo purus neque leo quam aliquet. Lobortis mi per felis eu. Tortor in nulla primis sit, maecenas velit, ligula pellentesque dis elementum, nunc mi erat mauris vitae blandit in. Phasellus amet pulvinar neque amet convallis, nulla fusce commodo aliquam augue, amet vitae et volutpat nam, nisl id nibh morbi et. Maecenas ultrices elit nibh. Doloremque massa amet vel lacus. Eros at suspendisse vulputate nulla condimentum, dignissim velit arcu, hac diam est, amet consequat id fermentum.
Tempor eros elementum nullam nec ligula ligula. Curabitur mattis pede, lacus et eleifend, tellus sed ipsum cubilia enim, quam et fusce. Mi ligula, laoreet porttitor dignissim mauris consequat euismod ut, luctus ut, donec rhoncus mi eget. Et erat turpis pede quam donec. Integer augue, lacus metus dolor, magna condimentum. Libero leo ac varius, sodales faucibus lacus sed, pretium amet blandit sed mi neque curabitur, purus nunc sed egestas ut, quis id voluptate. Metus commodo enim, potenti orci vivamus, arcu dolor, accumsan euismod est aut sit non quam, sit leo et leo nam sociosqu non. Ante nunc integer vehicula. Nonummy dui viverra, elit morbi lectus feugiat. Ac fringilla cras te
</div>