How to make menu appear as mouse scroll

Question

something similar to the menu of these two sites: http://fenixsub.com and http://www.intoxianime.com where the scroll action makes the menu appear.

Answer 1

You can use the scroolTop() function of the JQUERY library, this function gets the current vertical position of the scroll bar. https://api.jquery.com/scrollTop/

In the example below, whenever the user drops 200 pixels from the top of the site the menu is visible (when adding the css class)

$(window).scroll(function() {
        if ($(this).scrollTop() >= 200) {
            $('#menu').addClass('ativo');
        }
        else {
            $('#menu').removeClass('ativo');
        }
    });

CSS:

#menu{
    display: none;
}
.ativo{
    display: block;
}

Answer 2

Complementing the answer of Matthew, I leave here an example as simple as possible but that allows to see the menu to work when it does Scroll up and down.

To do so I also used scroll to detect when the user scrolls the page and scrollTop to get the distance to the top..

I created an additional variable visivel so he wasn’t showing the menu when it is already visible and hide when it is already hidden.

let visivel = false; //para fazer com que mostre e esconda só o necessário

$(window).on("scroll", function() {

  if ($(this).scrollTop() >= 200) { //200 marca o ponto de onde aparece
    if (!visivel) { //só mostra se estiver escondido
      visivel = true;
      $("#menu").slideDown();
    }
  } 
  else if (visivel) { //só esconde se estiver visível
    $("#menu").slideUp();
    visivel = false;
  }
});

#menu {
  display: none;
  position:fixed;
  top:0;
  left:0;
}

#menu ul {
  list-style-type: none;
}

#menu li {
  float: left;
}

#menu a {
  display: block;
  background-color: #eee;
  color: black;
  text-decoration: none;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu">
  <ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</nav>

<h1>Faça Scroll para baixo</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae magna eros. Suspendisse ultrices egestas mattis. Etiam sit amet porta risus, scelerisque imperdiet nulla. Fusce vel viverra lorem. Aenean porta, risus volutpat bibendum maximus, massa neque mattis magna, non sollicitudin tortor leo in dolor. Ut bibendum augue nisl, vitae tempus diam porta at. Nullam sapien enim, pellentesque quis semper at, dapibus quis diam. Sed a sodales augue.

Donec vitae ligula quis diam efficitur vehicula. Curabitur massa augue, commodo ut dui eget, malesuada pulvinar justo. Sed non fringilla arcu. Curabitur porta ultricies urna ut rutrum. Ut efficitur arcu tellus, at laoreet massa tristique nec. Vivamus id velit sit amet odio lobortis mattis. Curabitur ullamcorper hendrerit odio, at lobortis mi. In eu lectus sodales lacus semper finibus vel eget urna. Pellentesque aliquet mauris ac justo iaculis tincidunt. Nullam porttitor purus quis neque cursus maximus.

Maecenas ultrices mauris in lacus pretium dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis luctus purus a quam mattis vestibulum et vitae neque. Quisque dapibus metus convallis finibus varius. Nam fringilla quam in ullamcorper semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam at gravida tellus. Donec tincidunt mauris egestas ipsum faucibus aliquet.

Morbi mollis tempus nulla. Integer sodales egestas nibh quis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Nam tempor purus non felis sodales, non faucibus justo semper. Maecenas vehicula ante nunc, a efficitur magna lobortis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aliquam at urna id ipsum cursus viverra sit amet commodo libero. Nunc non porta mauris.

Maecenas sed erat eget est rutrum molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas et tempus nulla. Integer interdum leo massa, at tempus justo feugiat in. Suspendisse at risus luctus, luctus ex ut, ornare metus. Fusce tincidunt in quam sagittis viverra. Vivamus eu nunc quis augue consectetur euismod. Maecenas eu dolor sit amet eros tempus auctor sit amet quis dui. Praesent sit amet mauris vitae magna vulputate eleifend vel id tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae magna eros. Suspendisse ultrices egestas mattis. Etiam sit amet porta risus, scelerisque imperdiet nulla. Fusce vel viverra lorem. Aenean porta, risus volutpat bibendum maximus, massa neque mattis magna, non sollicitudin tortor leo in dolor. Ut bibendum augue nisl, vitae tempus diam porta at. Nullam sapien enim, pellentesque quis semper at, dapibus quis diam. Sed a sodales augue.

Donec vitae ligula quis diam efficitur vehicula. Curabitur massa augue, commodo ut dui eget, malesuada pulvinar justo. Sed non fringilla arcu. Curabitur porta ultricies urna ut rutrum. Ut efficitur arcu tellus, at laoreet massa tristique nec. Vivamus id velit sit amet odio lobortis mattis. Curabitur ullamcorper hendrerit odio, at lobortis mi. In eu lectus sodales lacus semper finibus vel eget urna. Pellentesque aliquet mauris ac justo iaculis tincidunt. Nullam porttitor purus quis neque cursus maximus.

Maecenas ultrices mauris in lacus pretium dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis luctus purus a quam mattis vestibulum et vitae neque. Quisque dapibus metus convallis finibus varius. Nam fringilla quam in ullamcorper semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam at gravida tellus. Donec tincidunt mauris egestas ipsum faucibus aliquet.

Morbi mollis tempus nulla. Integer sodales egestas nibh quis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Nam tempor purus non felis sodales, non faucibus justo semper. Maecenas vehicula ante nunc, a efficitur magna lobortis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aliquam at urna id ipsum cursus viverra sit amet commodo libero. Nunc non porta mauris.

Maecenas sed erat eget est rutrum molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas et tempus nulla. Integer interdum leo massa, at tempus justo feugiat in. Suspendisse at risus luctus, luctus ex ut, ornare metus. Fusce tincidunt in quam sagittis viverra. Vivamus eu nunc quis augue consectetur euismod. Maecenas eu dolor sit amet eros tempus auctor sit amet quis dui. Praesent sit amet mauris vitae magna vulputate eleifend vel id tellus.