waypoints 2

by Angelo Tirambulo

HTML

<div class="content">
</div>
<div class="content-static"></div>

<div class="content-overlay v1"></div>

<div class="content-overlay v2"></div>

<div class="content-overlay v1"></div>
<div class="content-overlay v2"></div>
<div class="content">
</div>

CSS

.content {
     width: 100%;
     height: 500px;
     background-color: black;
     display: in-block;
     position: relative;
 }
 
 .content-static {
     width: 100%;
     height: 900px;
     background-color: red;
    
 }
 
 .content-overlay {
     height: 300px;
     width: 75%;
     margin: 5%;
     display: in-block;
 }
 
 .v1 {
     background-color: blue;
    
 }
 
 .v2 {
     background-color: green;
     
 }

JavaScript

$('.content-static').waypoint(function() {
     console.log("container 1 is visible");
});