Вертикальная страница прокрутки со стрелкой внизу

Question

У меня есть сайт с одной страницей. Я использую scrollify от lukehaas. У меня есть пять разных разделов на моей странице. Недавно я добавил стрелку в нижней части первого раздела. Стрелка только прокручивает каждую секцию по участку и когда она достигает последней секции. Я хочу, чтобы стрела исчезла.

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

Хорошо, я хочу, чтобы добавить свойство CSS с JQuery, когда скроллинг достигает секции пять.

Answer 1

Веб-сайт luke haas показывает, что вы можете определить обратный вызов после завершения прокрутки плагина в раздел. Этот обратный вызов получит индекс прокрученного раздела и массив разделов. Итак, что вы можете сделать, это определить обратный вызов, который проверяет, плагин ли прокручивается до последнего элемента, и если так, то вызовите .hide() на стрелку.

jsfiddle example

Надеется, что это помогает.

--EDIT--

Для лучшего пользовательского опыта, я предлагаю вам использовать до того, а не после. «Перед» немедленно вызывается после свитка, перед анимацией. «После» вызывается после свитка, после анимации. Анимация занимает некоторое время, поэтому вам лучше скрывать стрелку, используя обратный вызов «до».

Updated jsfiddle