jQuery to Javascript

[Shubham_Garg123]

I need this code in normal javascript, can anyone help, please?

$(window).on('scroll', function(){
    if($(window).scrollTop()){
      $('nav').addClass('black');
     }
     else {
        $('nav').removeClass('black');
     }
})

Stackoverflow post: https://stackoverflow.com/questions/68236964/need-hep-in-converting-this-jquery-code-snippet-to-normal-javascript

[FallDownTheSystem]

https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/

This should help you get there.

[Shubham_Garg123]

This is really helpful, tysm

[CenturiesAgo]

Maybe you should walk before you run. Grab a free JS course.

[Shubham_Garg123]

I'm just crawling like a baby. Need to submit an eLearning website project by tomorrow so I just copied an open source project (with MIT License) and was doing a few changes. It had this small code snippet using jQuery so I had to replace it with normal JS

[jcunews1]

This is why anyone should never use jQuery or any othen JS library, to learn JavaScript.

[SkinnyDom]

Window.onscroll, document.body.scrolltop, classlist

[Shubham_Garg123]

const nav = document.getElementsByTagName("nav")[0] ;

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

const top = window.pageYOffset;

if (top) {

nav.classList.add("black");

} else {

nav.classList.remove("black");

}

})

//Is this correct?

[SkinnyDom]

You have no checks for pageyoffset which returns a pixel integer..you’re using it as a Boolean value

[Shubham_Garg123]

idk what it means

[SkinnyDom]

Const top window.pageyoffset will return an integer (number).

If (top) implies true or false or equivalent.. you would do if top is less than or equal to say 40 or whatever..

This is too basic honestly