How to add a class to an html element when a web page has been scrolled several px

Question

I want to add a class to $ ('# header') when my web page scrolls down by 100px
this is the code:

$(window).scroll(function(){
var offset = $(window).offset();
if (offset.top > 100) {
    $('#header').addClass('header2')
}
else {
    $('#header').removeClass('header2')
};
});

#JQueryCode

Answer 1

Please use below mention code

 $(window).scroll(function() { var scroll = $(window).scrollTop(); //console.log(scroll); if (scroll >= 50) { //console.log('a'); $("#header").addClass("header2"); } else { //console.log('a'); $("#header").removeClass("header2"); } });