I have this problem. At the bottom of a page is a fixed (position: fixed) div. When I scroll down I want to add a class to the div and when I scroll to the top the class must be removed. The following code works in the sense that it adds the class but when scrolling up it does not remove the class. So I added an alert to the else block and now if I scroll down it fires and I see a popup, which obviously makes no sense.

  $(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
      $("#legalNotice").addClass("show");
    } else {
      $("#legalNotice").removeClass("show");
    }
  });

How can this be right? I tried it in multiple browsers and the same result every time.

I have another part to do the same when I scroll to the bottom and that works fine.

  $(window).scroll(function () {
    if ($(this).scrollTop() > 3000) {
      $("#legalNotice").removeClass("show");
    } else {
      $("#legalNotice").addClass("show");
    }
  });

What could the problem be?