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

Question

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

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

控制台错误：

未捕获的类型错误：无法在 app.min.js:29 处读取 add_class_on_scroll (app.min.js:17) 处未定义的属性“添加”

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+ 中的部分支持