Как добавить плавное удаление класса?

Question

[S P]

Как плавно скрывать меню при скролле от 800px (в этой точке резко убирается класс, не получается добиться плавности скрытия).
Если делать через setTimeout, моргает в промежутке от 0 до 800.

Песочница: jsfiddle.net/sp_true/nh9o24td/3

Comments

[Сергей delphinpro]

Класс плавно убрать нельзя =) Он либо есть, либо его нет.

[Илья]

Используй css анимацию

[Сергей Сергей]

Сергей delphinpro, не, ну например

[Алексей Ярков]

Плавно удалять класс это по буковке? ))

[Comsequent]

CSS fadeIn / fadeOut
поищите

[Антон Литвиненко]

я мееееееедленно тяну штекер из розетки

[S P]

Илья, animate не срабатывает почему то

[S P]

Алексей Ярков, смешно, например задать свойство css -100px и потом удалить класс. Чтоб не было "прыжков" у меню

Answer 1

[Ruslan]

может сделать плавный скролл стр?

Answer 2

[S P]

Хм, тогда такой вопрос: Как в промежутке от 0 до 800px убрать переход от 100px к 0 и -100px в меню?

В точке 800 начинает меню "прыгать" при скролле

function AnimationNav(elem) {
        var navBar = $(elem); //Targets nav element
        var myWindow = $(window);
        var myPosition;
        var navScroll;
        var MenuHeight = $('.head-menu').outerHeight();
        $('.head-menu').css({ height: MenuHeight})

        window.addEventListener('scroll', function(e) {
            navScroll = myWindow.scrollTop();
            if (navScroll < myPosition && navScroll >= 800) {
                setTimeout(function(){
                navBar.css({top: 0 }).addClass('visible')
                console.log('Больше 800')
                }, 400);
            }
            else {
                navBar.css({top: -100})
                console.log('Вниз')
            }
            myPosition = myWindow.scrollTop();
            if (myPosition <= 800) { //hide  zone
                navBar.css({top: -100 })
                setTimeout(function(){
                    // navBar.removeClass('visible')
                }, 800);
                console.log('От 0 до 800')
            }
        }); 
    }