-1

algo parecido com o menu desses dois site: http://fenixsub.com e http://www.intoxianime.com onde o a ação de scroll faz o menu aparecer.

1

2 Respostas 2

1

Complementando a resposta do Mateus, deixo aqui um exemplo o mais simples possível mas que permite ver o menu a funcionar quando faz Scroll para baixo e para cima.

Para o fazer utilizei também scroll para detetar quando o utilizador faz scroll na página e scrollTop para apanhar a distância ao topo..

Criei uma variável adicional visivel para que não estivesse a mostrar o menu quando já é visível e esconder quando já está escondido.

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.

1

Você pode pode usar a função scroolTop() da biblioteca JQUERY, esta função obtém a posição vertical atual da barra de rolagem. https://api.jquery.com/scrollTop/

No exemplo abaixo, sempre que o usuário descer 200 pixeis a partir topo do site o menu fica visível(quando adicionando a classe css)

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

CSS:

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .