Why is my waypoint added class not removing when scrolling down

Question

I am running into a situation in which I have a box that comes in #projMarker , which is initially set as display: none . When it reaches #subSolSec it changes to display:block . I am doing this with jQuery's Waypoints function.

This aspect of it works well, but what I don't understand is when I exit #subSolSec , the projMarker does not go back to display: none it does this when exiting the waypoint when scrolling up, but not when exiting downwards.

To add/remove the class, I am using toggleClass .

Does anyone see what I am doing wrong?

 $('#subSolSec').waypoint(function() { $('#projMarker').toggleClass('active'); }, { offset: '0' }); 

 .area { width: 100%; height: 750px; } #sec1 { background: blue; } #sec3 { background: red; } #projMarker { position: fixed; top: 30%; right: 10px; width: 150px; height: auto; border: 1px solid black; z-index: 2; display: none; } #projMarker.active { display: block; } .markerItem { display: block; margin-bottom: 15px; color: #4D4D4D; font-family: 'Nunito', sans-serif; letter-spacing: .1rem; font-size: .8rem; line-height: 1.5em; } #subSolSec { width: 100%; height: auto; } .secSlant { height: auto; } .slantTop { background: #FFF; z-index: 1; position: relative; } .slantTop:before { content: ''; display: block; background: inherit; position: absolute; top: -6px; height: 500px; left: 0; right: 0; bottom: 0; z-index: -1; -webkit-transform: skewY(10.5deg); -moz-transform: skewY(10.5deg); -ms-transform: skewY(10.5deg); -o-transform: skewY(10.5deg); transform: skewY(10.5deg); -webkit-transform-origin: 100%; -moz-transform-origin: 100%; -ms-transform-origin: 100%; -o-transform-origin: 100%; transform-origin: 100%; -webkit-box-shadow: 0 -8px 8px 0 rgba(0, 0, 0, 0.05), 0 -12px 28px 0 rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 -8px 8px 0 rgba(0, 0, 0, 0.05), 0 -12px 28px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 -8px 8px 0 rgba(0, 0, 0, 0.05), 0 -12px 28px 0 rgba(0, 0, 0, 0.05); } .slantTop-noshadow:before { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .slantContainer { padding: 20px 0; margin: 0 10%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script> <section class="area" id="sec1"> </section> <section id="subSolSec"> <div id="projMarker"> <div class="markerItem"> Section 1 </div> <div class="markerItem"> Section 2 </div> </div> <div class="secSlant" id="secSlant1"> <div class="slantTop"> <div class="slantContainer"> <div class="slantBlock1"> <h2 class="hG2 slantTitle">1</h2> <p class="slantDesc"> Area for 1 </p> </div> </div> </div> </div> <div class="secSlant" id="secSlant2"> <div class="slantTop"> <div class="slantContainer"> <div class="slantBlock1"> <h2 class="hG2 slantTitle">2</h2> <p class="slantDesc"> Area for 2 </p> </div> </div> </div> </div> </section> <section class="area" id="sec3"> </section> 

Answer 1

You need to add another waypoint to disengage the waypoint the way you want. So:

$('#sec3').waypoint(function() {
  $('#projMarker').toggleClass('active');
}, {
  offset: '0'
});