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

希望这会对你有所帮助。

<强> - 编辑 -

为了获得更好的用户体验，我建议您使用之前而不是之后。＆＃39;之前＆＃39;在动画之前滚动后立即调用。＆＃39;后＆＃39;在动画之后滚动后调用。动画需要一段时间，所以你最好使用＆＃39;之前隐藏箭头。打回来。

Updated jsfiddle

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

1 个答案: