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

Question

[rinatoptimus]

При скролле элементу добавляется класс, но при этом удаляются все имеющиеся у этого элемента классы. Как сделать так, чтобы новый класс добавлялся к существующим?

const mq = window.matchMedia( "(max-width: 767px)" );
		var left = document.getElementById("container-auth-logo");
		var stop = (left.offsetTop - 10);

		if (mq.matches) {
	  	window.onscroll = function (e) {
		    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
		    if (scrollTop >= stop) {
		        left.className = 'stick';
		    } else {
		        left.className = '';
		    }
			}
		}

Пробовал так:

if (mq.matches) {
	  	window.onscroll = function (e) {
		    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
		    if (scrollTop >= stop) {
		        //left.className = 'stick';
		        var classString = left.className;
		        //console.log(classString);
					  var newClass = classString.concat(" stick");
					  //console.log(newClass);
					  this.className = newClass;
					  console.log(this.className);
		    } else {
		        left.className = '';
		    }
			}
		}

Использовал подобные конструкции:

var el = document.getElementById('#container-auth-logo');
el[i].className += ' stick';

var el = document.getElementById('container-auth-logo');
  if(el) {
    el.className += el.className ? ' stick' : 'stick';
}

Ни один вариант не сработал.
Живой пример показать не могу.

Answer 1

[Алексей Уколов]

el.classList.add('foo');
https://developer.mozilla.org/ru/docs/Web/API/Elem...

Comments

[rinatoptimus]

Благодарю! Так сработало:

if (scrollTop >= stop) {
    left.classList.add('stick');
} else {
    left.classList.remove('stick');
}

Вот только очень странно, почему ни по одной ссылке такого простого решения не было?..