Este tutorial le enseñará cómo cambiar el elemento de menú activo en el desplazamiento de la página sin usar ningún complemento o archivo js especial.

En esta demostración, usaremos funciones simples de jQuery para lograr nuestro objetivo.

Rendimiento esperado:

En el evento de desplazamiento de página, el elemento de menú seleccionado (activo) cambiará de acuerdo con la sección actual que se está viendo. También sucederá si el usuario hace clic en cualquiera de los enlaces del elemento del menú. Este tipo de implementación es bueno para sitios web de una sola página que tienen una barra de menú fija. Empecemos.

Demo en vivo

Primer paso: crear el marcado

El marcado es muy simple y fácil. Vamos a crear una barra de navegación simple con pocos elementos de menú como la que tenemos en www.instantshift.com. Tiene pocos elementos como Inicio, Diseño web, CSS, Herramientas, Tutoriales, etc. La página tendrá varios bloques de contenido de texto. Así es como se ve el Marcado.

Nuestro marcado Html está listo, ahora es el momento de agregar un poco de estilo CSS.

Paso dos: agregar clases 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;
}

Paso tres: Comprobación del área de juegos «jQuery».

En primer lugar, nos aseguramos de que al hacer clic en los enlaces del menú, el div correspondiente se desplace hacia arriba. Como puede ver en el código a continuación, al hacer clic en el enlace del elemento del menú, estamos eliminando la clase «activa» del elemento del menú seleccionado actualmente y agregando la clase activa al enlace del elemento en el que se hizo clic.

Entonces estamos obteniendo la ID del elemento en el que se hizo clic. this.hash devolverá «#foo», que es el selector de ID. Por lo tanto, $(this.hash) es lo mismo que $(«#foo») y seleccionará el elemento con 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);
        });
    });

En el evento de desplazamiento, comprobamos la posición de los elementos frente a la cantidad de desplazamiento, así como la suma de su altura y posición. Sobre esta base, estamos agregando y eliminando la clase activa de los elementos del menú.

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");
        }
    });
}

y por último, en el evento de desplazamiento de la página, estamos comprobando si la barra lateral estará pegajosa o no.

$(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');
            }
 });

Aquí está el guión completo.

Eso es todo, es fácil ¿verdad? ¡Disfrutar! No te olvides de ver la demostración.

Demostración en vivo y código fuente

Aquí puedes ver este menú de acción en acción en vivo. Además, puede descargar los archivos fuente para que pueda editarlos y usarlos directamente en lo que quiera.

Demostración en vivo  Descargar código fuente