Alterando o item de menu ativo na rolagem da página usando jQuery
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.
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.