javascript - 底部带箭头的垂直滚动页面

Question

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

HTML

<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>

CSS

.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;
}

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

Answer 1

网站luke haas显示您可以在插件完成滚动到某个部分后定义回调。此回调将接收滚动到部分的索引和部分数组。所以你可以做的是定义一个回调来检查插件是否滚动到最后一个元素，如果是的话，调用你箭头上的 .hide()。

jsfiddle example

希望对你有帮助。

--编辑--

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

Updated jsfiddle