title: Why is my waypoint added class not removing when scrolling down
body: <p>I am running into a situation in which I have a box that comes in <code>#projMarker</code>, which is initially set as <code>display: none</code>. When it reaches <code>#subSolSec</code> it changes to <code>display:block</code>. I am doing this with jQuery's Waypoints function.</p>
  
  <p>This aspect of it works well, but what I don't understand is when I exit <code>#subSolSec</code>, the <code>projMarker</code> does not go back to <code>display: none</code> it does this when exiting the waypoint when scrolling up, but not when exiting downwards.</p>
  
  <p>To add/remove the class, I am using <code>toggleClass</code>.</p>
  
  <p>Does anyone see what I am doing wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#subSolSec').waypoint(function() {
    $('#projMarker').toggleClass('active');
  }, {
    offset: '0'
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"&gt;&lt;/script&gt;
  &lt;section class="area" id="sec1"&gt;
  
  &lt;/section&gt;
  &lt;section id="subSolSec"&gt;
    &lt;div id="projMarker"&gt;
      &lt;div class="markerItem"&gt;
        Section 1
      &lt;/div&gt;
      &lt;div class="markerItem"&gt;
        Section 2
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="secSlant" id="secSlant1"&gt;
      &lt;div class="slantTop"&gt;
        &lt;div class="slantContainer"&gt;
          &lt;div class="slantBlock1"&gt;
            &lt;h2 class="hG2 slantTitle"&gt;1&lt;/h2&gt;
            &lt;p class="slantDesc"&gt;
              Area for 1
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="secSlant" id="secSlant2"&gt;
      &lt;div class="slantTop"&gt;
        &lt;div class="slantContainer"&gt;
          &lt;div class="slantBlock1"&gt;
            &lt;h2 class="hG2 slantTitle"&gt;2&lt;/h2&gt;
            &lt;p class="slantDesc"&gt;
              Area for 2
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  &lt;section class="area" id="sec3"&gt;
  
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>