Este tutorial ensinará como alterar o item de menu ativo na rolagem da página sem usar nenhum arquivo js ou plug-in especial.

Nesta demonstração, usaremos funções jQuery simples para atingir nosso objetivo.

Saída Esperada:

No evento de rolagem de página, o item de menu selecionado (ativo) será alterado de acordo com a seção atual que está sendo visualizada. Isso também acontecerá se o usuário clicar em qualquer link do item de menu. Esse tipo de implementação é bom para sites de página única com barra de menu fixa. Vamos começar.

Demonstração ao vivo

Primeiro Passo: Criando a Marcação

A marcação é muito simples e fácil. Vamos criar uma barra de navegação simples com poucos itens de menu, como temos em www.instantshift.com. Tem alguns itens como Home, Web Design, CSS, Ferramentas, Tutoriais, etc. A página terá vários blocos de conteúdo de texto. Aqui está a aparência da marcação.

Nossa marcação HTML está pronta, agora é hora de adicionar algum estilo CSS.

Passo Dois: Adicionando classes CSS.

body{
      background-color:#520000;font-size:17px;
}
 
#maindiv{
      background:#F4F3E8 url(images/page_bg.webp);
}
 
#title h1 {
     text-align: right;font-weight: bold;font-size: 25px;margin: 0;color:#fff;
}
 
.container {
     width: 1000px;margin: 0 auto;padding: 38px 0;
}
 
#wrapper{
     margin:0px auto;
}
 
#sidebar {
    width:250px;float:left;
}
 
#content {
   width:720px;float:right;padding-left:12px;
}
 
#title {
   width: 900px;height: 60px;float: right;
}
 
.clear:after {
   visibility: hidden;display: block;content: "";clear: both;height: 0;
}
 
nav {
  width:213px;background-color:#030000;border: 2px solid #4F4D4D;padding:0 12px;
}
 
nav.stickydiv {
   position: fixed;top: 0;z-index: 10000;margin-top:12px;
}
 
nav ul {
list-style-type:none;margin:0;padding:0;
}
 
nav li {
padding:5px 10px;
}
 
nav li a {
color:#fff;font-weight:700;line-height: 25px;
}
 
a{
text-decoration:none;
}
 
.active {
color: #F99;text-decoration: none;
}
 
p{
font-family:Verdana,Arial,Helvetica,sans-serif;
}
 
footer p{
  color:#fff;
}

Etapa Três: Verificando o playground “jQuery”.

Em primeiro lugar, garantimos que, ao clicar nos links do menu, o div correspondente deve ser rolado para cima. Como você pode ver no código abaixo, ao clicar no link do item de menu, removemos a classe “ativa” do item de menu selecionado no momento e adicionamos a classe ativa ao link do item clicado.

Então estamos obtendo o ID do elemento clicado. this.hash retornará “#foo” que é o seletor de ID. Portanto $(this.hash) é o mesmo que $(“#foo”) e irá selecionar o elemento com ID foo.

$('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
         
        $('a').each(function() {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
         var target = this.hash,
         menu = target;
        $target = $(target);
               
       $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 600, 'swing', function() {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });

No evento de rolagem, estamos verificando a posição dos elementos em relação à quantidade de rolagem, bem como a soma de sua altura e posição. Com base nisso, estamos adicionando e removendo a classe ativa dos itens de menu.

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#sidebar a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top  scrollPos) {
            $('#sidebar ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

e, por último, no evento de rolagem da página, estamos verificando se a barra lateral ficará fixa ou não.

$(window).scroll(function(){
        // the "12" should equal the margin-top value for nav.stickydiv
        var window_top = $(window).scrollTop() + 12;
        var div_top = $('#checkdiv').offset().top;
            if (window_top >= div_top) {
                $('nav').addClass('stickydiv');
            } else {
                $('nav').removeClass('stickydiv');
            }
 });

Aqui está o roteiro completo.

É isso, é fácil né? Apreciar! Não se esqueça de conferir a demonstração.

Demonstração ao vivo e código-fonte

Aqui você pode ver este menu de ação em ação ao vivo. Além disso, você pode baixar os arquivos de origem para poder editá-los e usá-los diretamente no que quiser.

 Código fonte de download de demonstração ao vivo