{"id":263022,"date":"2023-01-02T14:57:00","date_gmt":"2023-01-02T11:57:00","guid":{"rendered":"https:\/\/inform.click\/cambiar-el-elemento-del-menu-activo-en-el-desplazamiento-de-la-pagina-usando-jquery\/"},"modified":"2023-01-02T15:05:00","modified_gmt":"2023-01-02T12:05:00","slug":"cambiar-el-elemento-del-menu-activo-en-el-desplazamiento-de-la-pagina-usando-jquery","status":"publish","type":"post","link":"https:\/\/inform.click\/es\/cambiar-el-elemento-del-menu-activo-en-el-desplazamiento-de-la-pagina-usando-jquery\/","title":{"rendered":"Cambiar el elemento del men\u00fa activo en el desplazamiento de la p\u00e1gina usando jQuery"},"content":{"rendered":"<p>\n  Este tutorial le ense\u00f1ar\u00e1 c\u00f3mo cambiar el elemento de men\u00fa activo en el desplazamiento de la p\u00e1gina sin usar ning\u00fan complemento o archivo js especial.\n<\/p>\n<p>\n  En esta demostraci\u00f3n, usaremos funciones simples de jQuery para lograr nuestro objetivo.\n<\/p>\n<h5>\n  Rendimiento esperado:<br \/>\n<\/h5>\n<p>\n  En el evento de desplazamiento de p\u00e1gina, el elemento de men\u00fa seleccionado (activo) cambiar\u00e1 de acuerdo con la secci\u00f3n actual que se est\u00e1 viendo. Tambi\u00e9n suceder\u00e1 si el usuario hace clic en cualquiera de los enlaces del elemento del men\u00fa. Este tipo de implementaci\u00f3n es bueno para sitios web de una sola p\u00e1gina que tienen una barra de men\u00fa fija. Empecemos.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.instantshift.com\/demo\/jquery-active-menu\" target=\"_blank\" rel=\"noopener\">Demo en vivo<\/a>\n<\/p>\n<p>\n  Primer paso: crear el marcado\n<\/p>\n<p>\n  El marcado es muy simple y f\u00e1cil. Vamos a crear una barra de navegaci\u00f3n simple con pocos elementos de men\u00fa como la que tenemos en www.instantshift.com. Tiene pocos elementos como Inicio, Dise\u00f1o web, CSS, Herramientas, Tutoriales, etc. La p\u00e1gina tendr\u00e1 varios bloques de contenido de texto. As\u00ed es como se ve el Marcado.\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>Nuestro marcado Html est\u00e1 listo, ahora es el momento de agregar un poco de estilo CSS.<\/code>\n<\/p>\n<h3>\n  <code>Paso dos: agregar clases 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  Paso tres: Comprobaci\u00f3n del \u00e1rea de juegos \u00abjQuery\u00bb.<br \/>\n<\/h3>\n<p>\n  En primer lugar, nos aseguramos de que al hacer clic en los enlaces del men\u00fa, el div correspondiente se desplace hacia arriba. Como puede ver en el c\u00f3digo a continuaci\u00f3n, al hacer clic en el enlace del elemento del men\u00fa, estamos eliminando la clase \u00abactiva\u00bb del elemento del men\u00fa seleccionado actualmente y agregando la clase activa al enlace del elemento en el que se hizo clic.\n<\/p>\n<p>\n  Entonces estamos obteniendo la ID del elemento en el que se hizo clic. this.hash devolver\u00e1 \u00ab#foo\u00bb, que es el selector de ID. Por lo tanto, $(this.hash) es lo mismo que $(\u00ab#foo\u00bb) y seleccionar\u00e1 el elemento con 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  En el evento de desplazamiento, comprobamos la posici\u00f3n de los elementos frente a la cantidad de desplazamiento, as\u00ed como la suma de su altura y posici\u00f3n. Sobre esta base, estamos agregando y eliminando la clase activa de los elementos del men\u00fa.\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  y por \u00faltimo, en el evento de desplazamiento de la p\u00e1gina, estamos comprobando si la barra lateral estar\u00e1 pegajosa o no.\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  Aqu\u00ed est\u00e1 el gui\u00f3n 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  Eso es todo, es f\u00e1cil \u00bfverdad? \u00a1Disfrutar! No te olvides de ver la demostraci\u00f3n.\n<\/p>\n<h4>\n  Demostraci\u00f3n en vivo y c\u00f3digo fuente<br \/>\n<\/h4>\n<p>\n  Aqu\u00ed puedes ver este men\u00fa de acci\u00f3n en acci\u00f3n en vivo. Adem\u00e1s, puede descargar los archivos fuente para que pueda editarlos y usarlos directamente en lo que quiera.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.instantshift.com\/demo\/jquery-active-menu\" target=\"_blank\" rel=\"noopener\">Demostraci\u00f3n en vivo<\/a> &nbsp;<a href=\"http:\/\/www.instantshift.com\/assets\/downloads\/2014\/jquery-active-menu.zip\" target=\"_blank\" rel=\"noopener\">Descargar c\u00f3digo fuente<\/a>\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fuente de grabaci\u00f3n: <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 le ense\u00f1ar\u00e1 c\u00f3mo cambiar el elemento de men\u00fa activo en el desplazamiento de la p\u00e1gina sin usar ning\u00fan complemento o archivo js especial. En esta demostraci\u00f3n, usaremos funciones simples de jQuery para lograr nuestro objetivo. Salida esperada: en el evento de desplazamiento de p\u00e1gina, el elemento de men\u00fa seleccionado (activo) cambiar\u00e1 de acuerdo con la secci\u00f3n actual que se est\u00e1 viendo. Tambi\u00e9n suceder\u00e1 si el usuario hace clic en cualquiera de los enlaces del elemento del men\u00fa. Este tipo de implementaci\u00f3n es bueno para sitios web de una sola p\u00e1gina que tienen una barra de men\u00fa fija. Empecemos. Primer paso: crear el marcado El marcado es muy simple y f\u00e1cil. Nosotros \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":[151,125,229,60],"tags":[],"class_list":["post-263022","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-consejos-y-trucos-web","category-herramientas-web","category-libros-de-texto","category-web-y-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263022","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/comments?post=263022"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263022\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media\/221850"}],"wp:attachment":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media?parent=263022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/categories?post=263022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/tags?post=263022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}