{"id":260697,"date":"2023-01-02T14:57:00","date_gmt":"2023-01-02T11:57:00","guid":{"rendered":"https:\/\/inform.click\/alterando-o-item-de-menu-ativo-na-rolagem-da-pagina-usando-jquery\/"},"modified":"2023-01-02T15:10:00","modified_gmt":"2023-01-02T12:10:00","slug":"alterando-o-item-de-menu-ativo-na-rolagem-da-pagina-usando-jquery","status":"publish","type":"post","link":"https:\/\/inform.click\/pt-pt\/alterando-o-item-de-menu-ativo-na-rolagem-da-pagina-usando-jquery\/","title":{"rendered":"Alterando o item de menu ativo na rolagem da p\u00e1gina usando jQuery"},"content":{"rendered":"<p>\n  Este tutorial ensinar\u00e1 como alterar o item de menu ativo na rolagem da p\u00e1gina sem usar nenhum arquivo js ou plug-in especial.\n<\/p>\n<p>\n  Nesta demonstra\u00e7\u00e3o, usaremos fun\u00e7\u00f5es jQuery simples para atingir nosso objetivo.\n<\/p>\n<h5>\n  Sa\u00edda Esperada:<br \/>\n<\/h5>\n<p>\n  No evento de rolagem de p\u00e1gina, o item de menu selecionado (ativo) ser\u00e1 alterado de acordo com a se\u00e7\u00e3o atual que est\u00e1 sendo visualizada. Isso tamb\u00e9m acontecer\u00e1 se o usu\u00e1rio clicar em qualquer link do item de menu. Esse tipo de implementa\u00e7\u00e3o \u00e9 bom para sites de p\u00e1gina \u00fanica com barra de menu fixa. Vamos come\u00e7ar.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.instantshift.com\/demo\/jquery-active-menu\" target=\"_blank\" rel=\"noopener\">Demonstra\u00e7\u00e3o ao vivo<\/a>\n<\/p>\n<p>\n  Primeiro Passo: Criando a Marca\u00e7\u00e3o\n<\/p>\n<p>\n  A marca\u00e7\u00e3o \u00e9 muito simples e f\u00e1cil. Vamos criar uma barra de navega\u00e7\u00e3o 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\u00e1gina ter\u00e1 v\u00e1rios blocos de conte\u00fado de texto. Aqui est\u00e1 a apar\u00eancia da marca\u00e7\u00e3o.\n<\/p>\n<div id=\"maindiv\">\n  <code>\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<div class=\"container clear\">\n    <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<div id=\"sidebar\">\n      <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<div id=\"checkdiv\"><\/div>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<nav class=\"\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<ul>\n          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#home\" class=\"active\"&gt;Home&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#webdesign\"&gt;Web Design&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#css\"&gt;CSS&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#tools\"&gt;Tools&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n            <code>&lt;a href=\"https:\/\/inform.click#tutorials\"&gt;Tutorials&lt;\/a&gt;<\/code>\n          <\/li>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n        <\/ul>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/nav>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\n    <\/div>\n<p><!-- sidebar div end --><br \/>\n    <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<div id=\"content\">\n      <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"home\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>Home<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- Home Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"webdesign\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>Web Design<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- Web Design Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"css\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>CSS<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- CSS Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"tools\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>Tools<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- Tools Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<section id=\"tutorials\">\n        <code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<h1>\n          <code>Tutorials<\/code><br \/>\n        <\/h1>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/p>\n<p>\n          <code>&lt;!-- Tutorials Content Goes Here --&gt;<\/code>\n        <\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><br \/>\n      <\/section>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\n    <\/div>\n<p><!-- contain div end --><br \/>\n    <code>\u00a0\u00a0\u00a0\u00a0<\/code>\n  <\/div>\n<p><!-- container div end -->\n<\/div>\n<pre><!-- maindiv end --><\/pre>\n<p>\n  <code>Nossa marca\u00e7\u00e3o HTML est\u00e1 pronta, agora \u00e9 hora de adicionar algum estilo CSS.<\/code>\n<\/p>\n<h3>\n  <code>Passo Dois: Adicionando classes CSS.<\/code><br \/>\n<\/h3>\n<pre><code>&lt;code&gt;body{\n      background-color:#520000;font-size:17px;\n}\n \n#maindiv{\n      background:#F4F3E8 url(images\/page_bg.webp);\n}\n \n#title h1 {\n     text-align: right;font-weight: bold;font-size: 25px;margin: 0;color:#fff;\n}\n \n.container {\n     width: 1000px;margin: 0 auto;padding: 38px 0;\n}\n \n#wrapper{\n     margin:0px auto;\n}\n \n#sidebar {\n    width:250px;float:left;\n}\n \n#content {\n   width:720px;float:right;padding-left:12px;\n}\n \n#title {\n   width: 900px;height: 60px;float: right;\n}\n \n.clear:after {\n   visibility: hidden;display: block;content: \"\";clear: both;height: 0;\n}\n \nnav {\n  width:213px;background-color:#030000;border: 2px solid #4F4D4D;padding:0 12px;\n}\n \nnav.stickydiv {\n   position: fixed;top: 0;z-index: 10000;margin-top:12px;\n}\n \nnav ul {\nlist-style-type:none;margin:0;padding:0;\n}\n \nnav li {\npadding:5px 10px;\n}\n \nnav li a {\ncolor:#fff;font-weight:700;line-height: 25px;\n}\n \na{\ntext-decoration:none;\n}\n \n.active {\ncolor: #F99;text-decoration: none;\n}\n \np{\nfont-family:Verdana,Arial,Helvetica,sans-serif;\n}\n \nfooter p{\n  color:#fff;\n}<\/code><\/code><\/pre>\n<h3>\n  Etapa Tr\u00eas: Verificando o playground &#8220;jQuery&#8221;.<br \/>\n<\/h3>\n<p>\n  Em primeiro lugar, garantimos que, ao clicar nos links do menu, o div correspondente deve ser rolado para cima. Como voc\u00ea pode ver no c\u00f3digo abaixo, ao clicar no link do item de menu, removemos a classe &#8220;ativa&#8221; do item de menu selecionado no momento e adicionamos a classe ativa ao link do item clicado.\n<\/p>\n<p>\n  Ent\u00e3o estamos obtendo o ID do elemento clicado. this.hash retornar\u00e1 &#8220;#foo&#8221; que \u00e9 o seletor de ID. Portanto $(this.hash) \u00e9 o mesmo que $(&#8220;#foo&#8221;) e ir\u00e1 selecionar o elemento com ID foo.\n<\/p>\n<pre><code>$('a[href^=\"#\"]').on('click', function (e) {\n        e.preventDefault();\n        $(document).off(\"scroll\");\n         \n        $('a').each(function() {\n            $(this).removeClass('active');\n        })\n        $(this).addClass('active');\n         var target = this.hash,\n         menu = target;\n        $target = $(target);\n               \n       $('html, body').stop().animate({\n            'scrollTop': $target.offset().top+2\n        }, 600, 'swing', function() {\n            window.location.hash = target;\n            $(document).on(\"scroll\", onScroll);\n        });\n    });<\/code><\/pre>\n<p>\n  No evento de rolagem, estamos verificando a posi\u00e7\u00e3o dos elementos em rela\u00e7\u00e3o \u00e0 quantidade de rolagem, bem como a soma de sua altura e posi\u00e7\u00e3o. Com base nisso, estamos adicionando e removendo a classe ativa dos itens de menu.\n<\/p>\n<pre><code>function onScroll(event){\n    var scrollPos = $(document).scrollTop();\n    $('#sidebar a').each(function () {\n        var currLink = $(this);\n        var refElement = $(currLink.attr(\"href\"));\n        if (refElement.position().top  scrollPos) {\n            $('#sidebar ul li a').removeClass(\"active\");\n            currLink.addClass(\"active\");\n        }\n        else{\n            currLink.removeClass(\"active\");\n        }\n    });\n}<\/code><\/pre>\n<p>\n  e, por \u00faltimo, no evento de rolagem da p\u00e1gina, estamos verificando se a barra lateral ficar\u00e1 fixa ou n\u00e3o.\n<\/p>\n<pre><code>$(window).scroll(function(){\n        \/\/ the \"12\" should equal the margin-top value for nav.stickydiv\n        var window_top = $(window).scrollTop() + 12;\n        var div_top = $('#checkdiv').offset().top;\n            if (window_top &gt;= div_top) {\n                $('nav').addClass('stickydiv');\n            } else {\n                $('nav').removeClass('stickydiv');\n            }\n });<\/code><\/pre>\n<p>\n  Aqui est\u00e1 o roteiro completo.\n<\/p>\n<pre><code>\n&lt;script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\"&gt;\n\/\/&lt;![CDATA[\n\n$(document).ready(function () {\n$(window).scroll(function(){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var window_top = $(window).scrollTop() + 12;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ the \"12\" should equal the margin-top value for nav.stickydiv\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var div_top = $('#checkdiv').offset().top;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (window_top &gt;= div_top) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('nav').addClass('stickydiv');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('nav').removeClass('stickydiv');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\u00a0\n\u00a0\n\u00a0\u00a0$(document).on(\"scroll\", onScroll);\n\u00a0\n$('a[href^=\"#\"]').on('click', function (e) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(document).off(\"scroll\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('a').each(function () {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(this).removeClass('active');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(this).addClass('active');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var target = this.hash,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0menu = target;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$target = $(target);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('html, body').stop().animate({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'scrollTop': $target.offset().top+2\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, 600, 'swing', function () {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0window.location.hash = target;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(document).on(\"scroll\", onScroll);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n});\n\u00a0\nfunction onScroll(event){\n\u00a0\u00a0\u00a0\u00a0var scrollPos = $(document).scrollTop();\n\u00a0\u00a0\u00a0\u00a0$('#sidebar a').each(function () {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var currLink = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var refElement = $(currLink.attr(\"href\"));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (refElement.position().top &lt;= scrollPos && refElement.position().top + refElement.height() &gt; scrollPos) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#sidebar ul li a').removeClass(\"active\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0currLink.addClass(\"active\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0else{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0currLink.removeClass(\"active\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n}\n\/\/]]&gt;\n&lt;\/script&gt;<\/code><\/pre>\n<p>\n  \u00c9 isso, \u00e9 f\u00e1cil n\u00e9? Apreciar! N\u00e3o se esque\u00e7a de conferir a demonstra\u00e7\u00e3o.\n<\/p>\n<h4>\n  Demonstra\u00e7\u00e3o ao vivo e c\u00f3digo-fonte<br \/>\n<\/h4>\n<p>\n  Aqui voc\u00ea pode ver este menu de a\u00e7\u00e3o em a\u00e7\u00e3o ao vivo. Al\u00e9m disso, voc\u00ea pode baixar os arquivos de origem para poder edit\u00e1-los e us\u00e1-los diretamente no que quiser.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.instantshift.com\/demo\/jquery-active-menu\" target=\"_blank\" rel=\"noopener\"><\/a>&nbsp;<a href=\"http:\/\/www.instantshift.com\/assets\/downloads\/2014\/jquery-active-menu.zip\" target=\"_blank\" rel=\"noopener\">C\u00f3digo fonte de download<\/a> <a href=\"http:\/\/www.instantshift.com\/demo\/jquery-active-menu\" target=\"_blank\" rel=\"noopener\">de demonstra\u00e7\u00e3o ao vivo<\/a><a href=\"http:\/\/www.instantshift.com\/assets\/downloads\/2014\/jquery-active-menu.zip\" target=\"_blank\" rel=\"noopener\"><\/a>\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fonte de grava\u00e7\u00e3o: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2014\/11\/14\/jquery-page-scroll-active-menu\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Este tutorial ensinar\u00e1 como alterar o item de menu ativo na rolagem da p\u00e1gina sem usar nenhum arquivo js ou plug-in especial. Nesta demonstra\u00e7\u00e3o, usaremos fun\u00e7\u00f5es jQuery simples para atingir nosso objetivo. Resultado Esperado: No evento de rolagem de p\u00e1gina, o item de menu selecionado (ativo) ser\u00e1 alterado de acordo com a se\u00e7\u00e3o atual que est\u00e1 sendo visualizada. Isso tamb\u00e9m acontecer\u00e1 se o usu\u00e1rio clicar em qualquer link do item de menu. Esse tipo de implementa\u00e7\u00e3o \u00e9 bom para sites de p\u00e1gina \u00fanica com barra de menu fixa. Vamos come\u00e7ar. Primeiro Passo: Criando a Marca\u00e7\u00e3o A marca\u00e7\u00e3o \u00e9 muito simples e f\u00e1cil. N\u00f3s \u2026<\/p>\n","protected":false},"author":1,"featured_media":221850,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[150,124,228,59],"tags":[],"class_list":["post-260697","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dicas-e-truques-da-web","category-ferramentas-web","category-livros-didaticos","category-web-e-wordpress-2"],"_links":{"self":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=260697"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260697\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/221850"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=260697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=260697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=260697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}