5

Alguém sabe como fazer o efeito que ativa/desativa items do menu dependendo do scroll? Como por ex no site PHP do Jeito Certo, os items do menu ativam/desativam conforme vai rolando a página.

Tentei analisar o código fonte da página e não descobri e como não sei o nome da técnica(?) não consegui achar nada na internet.

3 Respostas 3

6

Não creio que esta funcionalidade tenha algum nome especial. Fiz um exemplo em que dá para ter uma ideia, foi com jquery e não com javascript nativo. Se não o ajudar desta maneira diga que eu retiro a resposta:

EXEMPLO

// animação scroll quando se clica no menu
$('span').on('click', function() {
  $("html, body").animate({
    scrollTop: $('#' +$(this).data('section')).offset().top // ir para a secção cujo o id é o valor do atributo `data-section` do item do menu onde clicamos
  }, 500);
});

// guardamos todas as distancias de cada secção até ao todo da página e respetivo id
var alturas = {};
$('.section').each(function () {
  alturas[$(this).prop('id')] = $(this).offset().top; // ex: alturas['section_2'] = 600
});

// quando fazemos scoll vamos percorrer o nosso obj alturas e comparar a altura de cada secção com o que já andamos em scroll
$(window).on('scroll', function() {
  for(var seccao in alturas) {
    if($(window).scrollTop() >= alturas[seccao]) {
      $('span').removeClass('active'); // removemos a classe ative
      $('span[data-section="' +seccao+ '"]').addClass('active'); // adicionamos a class active ao item do menu cuja data-section é igual ao id da secção que está a uma maior ou igual distancia do topo do que aquela que percorremos com o scroll
    }
  }
});
body {
 margin:0;
}
nav {
  position:fixed;
  top:0;
  background-color: #ffffff;
  left:0;
  height:100%;
}
span {
  display:block;
  border:1px solid;
  cursor: pointer;
}
.active {
  background-color: red;
}
.section {
  height:600px;
  width:400px;
  border:1px solid;
  text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
   <span class="active" data-section="section_1">
      Secção 1
   </span>
   <span data-section="section_2">
      Secção 2
   </span>
   <span data-section="section_3">
      Secção 3
   </span>
   <span data-section="section_4">
      Secção 4
   </span>
</nav>

<div id="section_1" class="section">
   Secção 1
</div>
<div id="section_2" class="section">
   Secção 2
</div>
<div id="section_3" class="section">
   Secção 3
</div>
<div id="section_4" class="section">
   Secção 4
</div>

3
  • 1
    Sua "brincadeira" responde a pergunta. Apenas traga para a resposta, para não depender do link... Vai que um dia a internet exploda né? kkk
    – Randrade
    Commented 25/05/2016 às 20:41
  • Era só para n ficar muito extenso. Vou postar a resposta
    – Miguel
    Commented 25/05/2016 às 20:41
  • Adicionei seu código no snippet, espero que não tenha problemas. :p
    – Randrade
    Commented 25/05/2016 às 20:46
2

A resposta do @Miguel já possui um exemplo de como fazer, então irei apenas mostrar o código do site que foi referido na pergunta.

Que tal "roubarmos" o fonte deles?

Eles utilizam jQuery e âncoras para fazer tal funcionalidade, como pode ser visto no código abaixo:

(function ($) {
    //Add current view's highlighting to the navigation

    /** helper for highlighting */
    function highlightNav(navLinks,id)
    {
        navLinks.filter('[href="/#'+id+'"]').addClass("active");
    }

    $(window).scroll(function() {
        //console.log("They see me scrollin, they hatin");

        //clear highlighting
        var navLinks = $('.site-navigation a');
        navLinks.removeClass("active");

        //calc current viewport
        var viewTop = $(window).scrollTop();
        var viewBottom = viewTop + $(window).height();

        //for all h1 and h2 elements, check if they are visible
        //performance tweak: stop each() after the first element is found to be behind view
        var previous = "";
        var foundOne = false;
        var fallback = "";
        $('h1, h2').each(function(i,e) {
            //get element position;
            var eTop = $(e).offset().top;
            var eBottom = eTop + $(e).height();
            var id=e.id;
            id = id.replace("_title", "");

            if (eTop >= viewTop) {
                //if we are passed the view and no heading was highlighted yet, store previous one as fallback
                if (! foundOne) {
                    fallback=previous;
                }
                if (eBottom <= viewBottom) {
                    highlightNav(navLinks, id);
                    foundOne = true;
                } else {
                    return false; //break the each(), the rest is below
                }
            }
            previous=id;
        });
        //no h1/h2 is in the viewport, so highlight the last one above
        if (! foundOne) {
            highlightNav(navLinks, fallback);
        }
    });
})(jQuery);

Esse código busca a âncora que está no scroll e adiciona a classe active no item do menu.

Caso queira estudar mais, esse código pode ser encontrado no passei direto.

Vale ressaltar que não encontrei a origem do código para postar os direitos autorais, então postei o que foi encontrado no site citado na pergunta e em pesquisas no Google.

0

Ao que parece, esse efeito chama-se Scrollspy. Encontrei ele na página do Materialize CSS

Scrollspy é um plugin jQuery que monitora certos elementos e qual elemento está centralizado na tela do usuário. Nossa principal demonstração disso é a nossa tabela de conteúdo em todas as páginas de documentação à direita. Ao clicar nesses links também irá rolar a página para o elemento.

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