Question

我想显示导航栏仅在用户向下滚动到第二个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;
}

JSBIN

Answer 1

你可以试试这个。

我所做的是添加

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>

Answer 2

您可以使用Viewport插件查找屏幕上显示的div。

Demo：http://www.appelsiini.net/projects/viewport/3x2.html

滚动到第二个div时会出现导航栏吗？

2 个答案: