Alterando o item de menu ativo na rolagem da página usando jQuery

21

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.

<div id="maindiv">
    <div class="container clear">
        <div id="sidebar">
            <div id="checkdiv"></div>
            <nav class="">
                <ul>
                    <li><a href="#home" class="active">Home</a></li>
                    <li><a href="#webdesign">Web Design</a></li>
                    <li><a href="#css">CSS</a></li>
                    <li><a href="#tools">Tools</a></li>
                    <li><a href="#tutorials">Tutorials</a></li>
                </ul>
            </nav>
        </div> <!-- sidebar div end -->
        <div id="content">
            <section id="home">
                <h1>Home</h1>
                <p><!-- Home Content Goes Here --></p>
            </section>
            <section id="webdesign">
                <h1>Web Design</h1>
                <p><!-- Web Design Content Goes Here --></p>
            </section>
            <section id="css">
                <h1>CSS</h1>
                <p><!-- CSS Content Goes Here --></p>
            </section>
            <section id="tools">
                <h1>Tools</h1>
                <p><!-- Tools Content Goes Here --> </p>
            </section>
            <section id="tutorials">
                <h1>Tutorials</h1>
                <p><!-- Tutorials Content Goes Here --></p>
            </section>
        </div> <!-- contain div end -->
    </div> <!-- container div end -->
</div><!-- maindiv end -->

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 && refElement.position().top + refElement.height() > 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.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function(){
        var window_top = $(window).scrollTop() + 12;
       // the "12" should equal the margin-top value for nav.stickydiv
        var div_top = $('#checkdiv').offset().top;
        if (window_top >= div_top) {
                $('nav').addClass('stickydiv');
            } else {
                $('nav').removeClass('stickydiv');
            }
    }); 
 
  $(document).on("scroll", onScroll);
 
$('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);
        });
    });
});
 
function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#sidebar a').each(function () {
        var currLink = $(this);
       var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#sidebar ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}
</script>

É 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

Este site usa cookies para melhorar sua experiência. Presumiremos que você está ok com isso, mas você pode cancelar, se desejar. Aceitar Consulte Mais informação