Поменять id меню при прокрутке

[virtas]

Есть меню класс меню main-navbar, можно ли заменить его на другой класс если например человек прокрутил 200px от верха экрана.
Был main-navbar а должен стать main-navbar2

[Mess4me]

virtas,

<script>

    document.onscroll = function (event) {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        console.log(scrollTop);
        if(scrollTop > 200) {
            var el = document.getElementsByClassName('main-navbar')[0];

            el.className = 'main-navbar2';

        }

    }

</script>

[virtas]

Mess4me,
Скажите а как указать в место класса id

[destus]

Mess4me,
Скажите а как указать в место класса id

https://learn.javascript.ru/searching-elements-dom

[virtas]

Что то не выходит у меня ( может я не то что нужно ищу.?
Мне нужно вот меню поменять индификатор я изменения стиля при прокрутке в низ, может оно по другому делается ?

[destus]

<script>

    document.onscroll = function (event) {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        console.log(scrollTop);
        if(scrollTop > 200) {
            var el = document.getElementById('main-navbar');

            el.id = 'main-navbar2';

        }

    }

</script>

[virtas]

Спасибо большое все хорошо получается, правда только после того как скрол в верх id main-navbar назад не возвращается.
хотелось бы так меню верху цвет один меню снизу цвет другой.

[destus]

<script>

    document.onscroll = function (event) {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        console.log(scrollTop);
        if(scrollTop > 200) {
            var el = document.getElementById('main-navbar');
            el.id = 'main-navbar2';
        }
else{
var el = document.getElementById('main-navbar2');
el.id = 'main-navbar';
}

    }

</script>

[virtas]

Огромное вам спасибо