Vanilla JS，在滚动位置上添加和删除类

Question

嘿，我正在尝试根据滚动位置添加一个类。 它在Jquery工作，但我想转向香草，它不起作用。 我错过了什么？

如果用户滚动到30px的位置，它应该添加类.c-logo - 滚动

控制台错误：

未捕获的TypeError：无法读取未定义的属性“add”     at add_class_on_scroll（app.min.js:17）     在app.min.js：29

var scrollPosition = window.scrollY;
var logoContainer = document.getElementsByClassName('js-logo');

window.addEventListener('scroll', function() {

    scrollPosition = window.scrollY;

    if (scrollPosition >= 30) {
        logoContainer.classList.add('c-logo--scrolled');
    } else {
        logoContainer.classList.remove('c-logo--scrolled');
    }

});

Answer 1

var logoContainer = document.getElementsByClassName('js-logo');

var logoContainer = document.getElementsByClassName('js-logo')[0];

然后：

1. 将脚本放在正文的底部。
2. 确保哪些元素真正滚动 - 它并不总是窗口。
3. https://developer.mozilla.org/ru/docs/Web/API/Window/scrollY - IE中不支持
4. http://caniuse.com/#feat=classlist - IE10 +
中的部分支持