Как остановить Анимацию Javascript?

Question

[AntonVirovets]

Ребята, такая проблема. Сделал анимацию(нужно только так как у меня, нельзя через css). Все работает, но нужно как то остановить функцию fade, что бы постоянно анимация не происходила а только один раз. Использую clearInterval, но он не работает, я так понимаю из-за области видимости. Но как исправить, не могу понять.. https://jsbin.com/neyapet/edit?html,css,js,output

Comments

[Nick Sdk]

у вас не "не останавливается" анимация, а постоянно перезапускается при каждом скроле при условии, что мы находимся не в "топе"

Answer 1

[Nick Sdk]

добавить еще условий...

if (window.pageYOffset < headerBottom) {
        header.classList.remove('sticky');
        flag = true; // это 
    } else if (window.pageYOffset > headerBottom && flag) { // и здесь еще && flag
        header.classList.add('sticky');
        fade(header, 2000, 50);
        flag = false;
    }

Comments

[AntonVirovets]

Спасибо Большое!)сработало)

[AntonVirovets]

Только когда второй раз опускаешь, теперь хедер сначала резко появляется, а потом уже начинает анимацию.. это из-за чего?

[Nick Sdk]

AntonVirovets, остается "прозрачность" от предыдущего срабатывания "анимации". перед анимацией (когда происходит переход) ставьте прозрачность в 0
header.style.opacity = 0;

[Nick Sdk]

AntonVirovets,

if (window.pageYOffset < headerBottom) {
        header.classList.remove('sticky');
        flag = true; // это 
    } else if (window.pageYOffset > headerBottom && flag) { // и здесь еще && flag
        header.classList.add('sticky');
        header.style.opacity = 0; // вот в этом месте к примеру
        fade(header, 2000, 50);
        flag = false;
    }

[AntonVirovets]

Спасибо)

Answer 2

[Александр Миранович]

if (window.pageYOffset < headerBottom) {
        header.classList.remove('sticky');
        flag = true;
    } else if (window.pageYOffset > headerBottom && flag) {
        header.classList.add('sticky');
        fade(header, 2000, 50);
        flag = false;
    }

Comments

[AntonVirovets]

Спасибо большое! сработало!)

[AntonVirovets]

Только когда второй раз опускаешь, теперь хедер сначала резко появляется, а потом уже начинает анимацию.. это из-за чего?

[Александр Миранович]

AntonVirovets,
https://jsfiddle.net/bjdkwqw8/1/

[Nick Sdk]

Александр Миранович, https://jsfiddle.net/bjdkwqw8/2/