Упростить скрипт на JQuery
 

Всем привет!
В JS совсем юн, а использовать надо. Изучаю потихоньку его, но пишу свои простые скрипты пока на JQuery. Поэтому, не судите строго студента. У меня вопрос к более опытным и знающим. Работаю над сайтом.Задача стоит чтобы при скроллинге header изменял высоту и размер логотипа. Написал код:

//    header scroll
    $(window).scroll(function() {
        if ($(this).scrollTop() > 1) { 
            $('.navigation').hide(),
            $('.header').addClass('header_sticky'),
            $('.header__logo').addClass('header__logo_sticky'),
            $('.header__switch').show('drop', { direction: 'right' });
        } else {
            $('.navigation').show(),
            $('.header').removeClass('header_sticky'),
            $('.header__logo').removeClass('header__logo_sticky'),
            $('.header__switch').hide('drop', { direction: 'right' });
        }
    }); // end header scroll

Вопрос такой,
во-первых: правильно ли (синтаксически) перечислять команды через запятую (Изначально через ";" было. Но я так сделал потому что ошибку искать начал. Ошибка:header дергался, небольшой зазор в 1px сверху начал появляться-исчезать. Начал отлаживать, мучался, дошёл до инструкции if else попробовал через запятую прописать. И вроде дергаться перестал)

и во-вторых: Как можно этот код упростить? мне кажется он слишком громоздкий и не совсем верный хоть и рабочий.

Был бы признателен за помощь)
P.s: ну и в идеале (извините за наглость, конешно) было бы интересно на ванильном JS этот код посмотреть :)

на JS было бы так
document.getElementsByClassName('header')[0].style.display = "none";
document.getElementsByClassName('header')[0].classList.add('header_sticky');
через запятую вроде можно, хотя как то странно всегда ; ставят

Спасибо! Вот только не понял куда это вставить? Так же в $(window).scroll(function() - if else? И почему "display = 'block'"?? хедер ведь тогда вообще исчезнет? И какую роль играет нулевой индекс массива [0] после объявления класса?
В общем в чистом виде не работает (Заранее извиняюсь за возможное незнание каких то простых вещей. Я в JS совсем зеленый)

//    header scroll
    $(window).scroll(function() {
        if ($(this).scrollTop() > 1) { 
            //document.getElementsByClassName('header')[0].style.display = "none";   
            document.getElementsByClassName('header')[0].classList.add('header_sticky');   
        } else {
            document.getElementsByClassName('header')[0].classList.remove('header_sticky'); 
        }
    }); // end header scroll

Я вот как попробовал.

Кажется до меня начинает доходить по чуть чуть. Переписал так:

//    header scroll
    $(window).scroll(function() {
        if ($(this).scrollTop() > 1) { 
            document.getElementsByClassName('navigation')[0].style.display = "none";   
            document.getElementsByClassName('header')[0].classList.add('header_sticky');
            document.getElementsByClassName('logo')[0].classList.add('logo_sticky'); 
            document.getElementsByClassName('header__switch')[0].style.display = "block";
        } else {
            document.getElementsByClassName('navigation')[0].style.display = "block";
            document.getElementsByClassName('header')[0].classList.remove('header_sticky'); 
            document.getElementsByClassName('logo')[0].classList.remove('logo_sticky'); 
            document.getElementsByClassName('header__switch')[0].style.display = "none";
        }
    }); // end header scroll

А как добавить плавности исчезновению? И что значит нулевой индекс массива ([0]) после объявления селектора класса в инструкции?

Метод getElementsByClassName() возвращает массив элементов, а тебе нужен первый.

Спасибо :)