What’s wrong with my Javascript scroll tag body code?

Question

Look at my personal code, my scroll is on the tag body, but it doesn’t work, I’ve done everything and nothing my scroll ta na < body > and still doesn’t work, what’s wrong ?

$(document.body).on("scroll", function(){
if($(document.body).scrollTop() > 10){
    $("#navbar").removeClass("fixed-bottom");
    $("#navbar").addClass("sticky-top");
    }else{
$("#navbar").removeClass("sticky-top");
    $("#navbar").addClass("fixed-bottom");
}});

Answer 1

Who scrolls the page is the object window, and not the body, unless you’ve put an overflow on the body with set height.

Your correct code would be:

$(window).on("scroll", function(){
   $("span").html("Scroll: "+$(this).scrollTop()); // só para ilustrar. Apague esta linha
   if($(this).scrollTop() > 10){
      $("#navbar").removeClass("fixed-bottom");
      $("#navbar").addClass("sticky-top");
   }else{
      $("#navbar").removeClass("sticky-top");
      $("#navbar").addClass("fixed-bottom");
   }
});

div{
   height: 2000px;
}

span{
   position: fixed;
   top: 10px;
   right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Role pra baixo</div>
<span></span>