CODEWITHSUNDEEP
jqueryhtmlcssnav
Orahmax
Orahmax

Reputation: 2341

Make navigation bar appear when scrolled to second div?

i want to show navigation bar appear only when user has scrolled down to second div. First div is header.

how can i do this using 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

Upvotes: 1

Views: 1011

Answers (2)

Tushar
Tushar

Reputation: 4418

You can try this.

What I have done is added

position: relative;
z-index: 11;

to the first div by which it is placed above the nav. 

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

Upvotes: 2

Rakesh Kumar
Rakesh Kumar

Reputation: 2855

You can use Viewport plugin to find the div appear on screen.

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

Upvotes: 0

Related Questions