Nav Scroll help?

Question

Guys what is wrong with my jQuery function.. i feel stupid. I want the header to apply a new class "new-nav" when the hero is scrolled by the whole hero height being 100vh or let's say when the hero is scrolled by 50. right now it's not doing anything?
I'm trying to achieve changing the background colour of the header (navigation) when scroll the page.
https://code.sololearn.com/W1qgQQjB4Vqy/?ref=app

Answer 1

Instead of using a scroll function on the hero class (which doesn't really make sense) change it to the windows pageY offset. Also you are creating a new class called ".nav-new" instead of just "nav-new". Don't use the dot/period in front of the class name when using addClass() method. jQuery already knows it's a class so the class specifier isn't needed.

$(document).ready(function(){

$(window).scroll(function() {
if (window.pageYOffset > 50) { //<-- use window.pageYOffset instead
$('header').addClass('nav-new');
} else {
$('header').removeClass('nav-new');
}
});

});

Answer 2

thanks I understand what you mean. I really have so much to still learn !