javascript - 为什么我的航路点添加类在向下滚动时没有删除

Question

我遇到这样一种情况，我有一个框，它位于 #projMarker 中，最初设置为 display: none。当它到达 #subSolSec 时，它变为 display:block。我正在使用 jQuery 的 Waypoints 函数执行此操作。

这方面效果很好，但我不明白的是当我退出 #subSolSec 时，projMarker 不会返回到 显示:无 它在向上滚动时退出航路点时执行此操作，但在向下滚动时不执行此操作。

要添加/删除类，我正在使用 toggleClass。

有没有人看到我做错了什么？

$('#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

您需要添加另一个航路点以按照您想要的方式脱离航路点。所以:

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