Как сделать появление объекта (допустим, меню), когда мы проскролили где-то 500 px вниз?

Question

[Руслан Тимурзиев]

И наоборот: когда движемся вверх, то элемент пропадает.

Answer 1

[Edward]

.menu { display: none; }

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

Answer 2

[DTX]

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