How do we make an object (let's say a menu) appear when we've scrolled down about 500px?

Question

JavaScript

And vice versa: when we move up, the element disappears.

Answer 1

.menu { display: none; }

$(window).on('scroll', function() {
    if ($(this).scrollTop() > 500) {
        $('.menu').fadeIn();
    } else {
        $('.menu').fadeOut();
    }
});

Answer 2

var ttl = 0;
var prevS, prevScrollDir;
$(window).on('scroll', function() {
  var s = $(this).scrollTop();
  var scrollDir = s > prevS;
  
  if (scrollDir == prevScrollDir) {
    ttl += (s-prevS);
    if (ttl > 500) {
      $(".m").removeClass('hide');
    }
  } else {
    ttl = 0;
    $(".m").addClass('hide');
  }
  
  prevS = s;
  prevScrollDir = scrollDir;
});

codepen.io/anon/pen/BLGjpV