我想显示导航栏仅在用户向下滚动到第二个 div 时出现。第一个 div 是标题。
我如何使用 jquery 来做到这一点？ html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>
<nav>navigation menu</nav>
header 200px height
</header>
<div id="div-2">Second Div</div>
</body>
</html>
CSS
header{
height:200px;
}
nav{
background-color: red;
width: 100%;
height: 30px;
display: none;
}
#div-2{
background-color: blue;
}
最佳答案
你可以试试这个。
我所做的是添加
position: relative;
z-index: 11;
到导航上方的第一个 div。
* {
margin: 0;
font-family: Arial;
}
.slide {
height: 1000px;
font-size: 20px;
}
#slide1 {
background: #999;
position: relative;
z-index: 11;
}
#slide2 {
background: #888;
}
#slide3 {
background: #777;
}
#slide4 {
background: #666;
}
.nav {
position: fixed;
font-size: 20px;
color: #000;
background: #ccc;
left: 0;
right: 0;
top: 0;
}
.nav a {
color: #fff;
display: inline-block;
padding: 5px;
text-decoration: none;
}<div class="nav" style="">
<a href="#slide1" class="scrollThis">slide1</a>
<a href="#slide2" class="scrollThis">slide2</a>
<a href="#slide3" class="scrollThis">slide3</a>
<a href="#slide4" class="scrollThis">slide4</a>
</div>
<div class="wrapper">
<div id="slide1" class="slide">slide1</div>
<div id="slide2" class="slide">slide2</div>
<div id="slide3" class="slide">slide1</div>
<div id="slide4" class="slide">slide2</div>
</div>关于jquery - 滚动到第二个 div 时使导航栏出现？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22188634/