Упростить скрипт на 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 этот код посмотреть :)

Я тут как минимум вижу, что всё можно было сделать через taggle() и taggleClass(), и сократить в половину

vittoS,
Это можно, потому что ты последовательно вызываешь здесь методы и оператор запятая могет с этим работать.
Но так не принято)

vittoS,
Непонятно зачем при таком скроллТопе делать стики-хедер. Почему сразу не сделать его fixed? И при скролле вешать/убирать классы на логотип и сам хедер

А через toggle как? Не понимаю немного...можно пример?

А он и есть "position:fixed" в css. Задача стояла такая - нужно было чтобы
header и логотип меняли размер на меньший и цвет, а меню навигации плавно исчезало при скроллинге.

Примерчик бы...:(

Добрые люди намекнули как на JS эти инструкции можно записать.
Вот. переписал почти на чистом.

//    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]) после объявления селектора класса в инструкции?

vittoS,
document.getElementsByClassName возвращает коллекцию всех элементов с указанным классом
https://developer.mozilla.org/ru/doc...ntsByClassName
[0] - первый элемент из найденных

Насчет плавности - например, возвращаясь к jQuery - fadeOut, fadeIn

http://jquery.page2page.ru/index.php...81%D1%82%D0%B8

Благодарю :)