Nav Scroll help? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

Nav Scroll help?

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.

14th Sep 2017, 10:11 PM
Jay - avatar
2 Answers
+ 7
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'); } }); });
14th Sep 2017, 11:18 PM
ChaoticDawg - avatar
+ 1
thanks I understand what you mean. I really have so much to still learn !
14th Sep 2017, 11:38 PM
Jay - avatar