Javascript 底部带有箭头的垂直滚动页面

我有一个单页网站。我正在使用lukehaas的scrollify。 我的页面中有五个不同的部分。我最近在第一部分的底部添加了一个箭头。箭头仅在到达最后一节时逐节向下滚动。我想让那支箭消失

HTML

好的，当滚动到第五节时，我想用jquery添加一个css属性。

的网站显示，在插件滚动到某一节后，您可以定义一个回调。此回调将接收滚动到节的索引和节数组。因此，您可以定义一个回调来检查插件是否滚动到最后一个元素，如果滚动到最后一个元素，则在箭头上调用

.hide（）

希望这对你有帮助

--编辑--

为了获得更好的用户体验，我建议您在使用之前而不是之后使用Before'在滚动之后、动画之前立即调用在滚动之后、动画之后调用After。动画需要一段时间，因此最好使用“before”回调隐藏箭头

---

我尝试使用$（window）.height（），但我想不出任何可能的方法来到达最后一部分。scrollTop在这种情况下会派上用场吗？

var bottomHeight=$（窗口）；如果（scrollTop>bottomHeight）{$（'.arrow down'）.hide（）；}

类似的内容？但不起作用。既然Scrollyfy可以帮你处理，你为什么还要自己编写代码呢？我编辑了JSFIDLE，当您向下滚动到javascript的底部时，您将看到我编写的代码。因为我正在学习。嗯，我真的不明白scrollify是如何处理的。从JSFIDLE中删除了scrollify源代码，并添加了一个cdn。答案中有新的JSFIDLE链接。您需要知道的一切都在网站上解释。

<section id="one">
   <a href="#0" class="arrow-down"></a>
</section>

<section id="two">
</section>

<section id="three">
</section>

<section id="four">
</section>

<section id="five">
</section>

.arrow-down {
width: 0; 
height: 0; 
border-left: 20px solid transparent;
border-right: 20px solid transparent;

border-top: 20px solid rgba(40,46,106,0.7);
position: fixed;
z-index: 99;
bottom: 2%;
left: 0;
right: 0;
margin: 0 auto;
}