Sticky Header is not working -javascript

Question

Работали над липким заголовком, где я хотел закодировать свой собственный код javascript для заголовка вместо плагина, по какой-то причине моя скрипка не работает, несмотря на то, что я думаю, что это правильно.

<script> 
var nav = document.querySelector('.sticker'); 
var top = nav.offsetTop; 

function scroll(e) { 
if (window.scrollY>=top) { 
sticker.classList.add('sticky'); 
} 
else { 
sticker.classList.remove('sticky'); 
} 
} 
document.addEventListener('scroll', scroll); 
</script> 

/*css*/ 
.sticky{ 
position: fixed; 
top: 0; 

}

jsfiddle- http://jsfiddle.net/j9rfmq4e/10/

PS - Новичок, поэтому запаситесь легко на комментарии

Answer 1

При изменении в ClassList, вы ссылались на имя класса элемента ' sticker ', а не переменная' nav ', объявленная в начале вашего скрипта, которая возвращает ошибку.

sticker.classList.add('sticky'); 

Должно быть

nav.classList.add('sticky'); 

Answer 2

Вы ссылается на другой элемент, а не целевой элемент. Заменить код здесь:

sticker.classList.add('sticky'); 

С:

nav.classList.add('sticky');