Scroll detection on a page, adding and removing classes

Asked

Viewed 24 times

1

Well, I’m trying to get the header from a page, receive or lose a class, depending on the position of the page, someone could inform me what is wrong, and help me fix ?

window.onscroll = function() {

    var mobileTransp = document.getElementById('mobile-header');

    if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
        mobileTransp.classList.remove('on-top');
    }
    else{
        mobileTransp.classList.add('on-top');
    }

};
javascript
  • 1

    What’s the matter?

  • is not working

  • 1

    Not adding the class?

  • I wasn’t, but I just solved

  • 1

    I suggest you post your solution in the answer. =)

  • Ready :3 thanks for the readiness

Show 1 more comment

1 answer

1


To solve the problem, one solution was to add the event to a separate function

window.onscroll = function() {scroll()};

function scroll(){

    var mobileTransp = document.getElementById('mobile-header');

    if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
        mobileTransp.classList.remove('on-top');
    }
    else{
        mobileTransp.classList.add('on-top');
    }
};
  • 1

    Good afternoon, so let me know if it worked. I was curious... hugging!!

  • 1

    @kaputtz, did not roll, but did the procedure otherwise, using python, so I closed the question

  • 1

    Show too! Thank you!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.