¿Cambiar elemento de menú activo en desplazamiento de página?

95

A medida que se desplaza hacia abajo en la página, el elemento de menú activo cambia. ¿Cómo se hace esto?

jquery html

— Joe Bobby
fuente

205

Se hace vinculando al evento de desplazamiento del contenedor (generalmente ventana).

Ejemplo rápido:

// Cache selectors
var topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   // Set/remove active class
   menuItems
     .parent().removeClass("active")
     .end().filter("[href='#"+id+"']").parent().addClass("active");
});

Vea lo anterior en acción en jsFiddle, incluida la animación de desplazamiento.

— mekwall
fuente

2

Si su menú tiene una combinación de ID en la página y páginas normales, coloque primero los enlaces de ID en la página, luego cambie menuItems = topMenu.find("a"),a menuItems = topMenu.find("a").slice(0,4),, reemplazando 4con [sus enlaces en la página - 1].

— Stephen Saucier

5

De hecho, utilicé menuItems = topMenu.find ('a [href ^ = "#"]'), por lo que solo devolvía enlaces de anclaje. Funciona de maravilla.

— Julian K

1

El violín está roto. ¿Podrías arreglarlo? Thx

— m1crdy

1

@ m1crdy Gracias por el aviso. Ha sido arreglado. Parece que algo en jQuery edge lo rompió. Funciona bien con 2.1.0 :)

— mekwall

1

@JoelAzevedo Parece que Sizzle ha cambiado. Se actualizaron la respuesta y el caso de prueba para que funcionen con jQuery 2.2.

— mekwall

16

Solo revisa mi código, francotirador y enlace de demostración:

    // Basice Code keep it 
    $(document).ready(function () {
        $(document).on("scroll", onScroll);

        //smoothscroll
        $('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
            }, 500, 'swing', function () {
                window.location.hash = target;
                $(document).on("scroll", onScroll);
            });
        });
    });

// Use Your Class or ID For Selection 

    function onScroll(event){
        var scrollPos = $(document).scrollTop();
        $('#menu-center a').each(function () {
            var currLink = $(this);
            var refElement = $(currLink.attr("href"));
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                $('#menu-center ul li a').removeClass("active");
                currLink.addClass("active");
            }
            else{
                currLink.removeClass("active");
            }
        });
    }

demo en vivo

Mostrar fragmento de código

$(document).ready(function () {
    $(document).on("scroll", onScroll);
    
    //smoothscroll
    $('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
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 0 0 0 0;
}
#menu-center ul li a{
		padding: 32px 40px;
}
#menu-center ul li {
    list-style: none;
    margin: 0 0 0 -4px;
    display: inline;

}
.active, #menu-center ul li a:hover  {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
	background-color: rgba(0, 0, 0, 0.12);
	padding: 32px 40px;

}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 72px;
}
#home {
    background-color: #286090;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
#portfolio {
    background: gray; 
    height: 100vh;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100vh;
    width: 100%;
}
#contact {
    background-color: rgb(154, 45, 45);
    height: 100vh;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--	<div class="container">	--->
			<div class="m1 menu">
			<div id="menu-center">
				<ul>
					<li><a class="active" href="#home">Home</a>

					</li>
					<li><a href="#portfolio">Portfolio</a>

					</li>
					<li><a href="#about">About</a>

					</li>
					<li><a href="#contact">Contact</a>

					</li>
				</ul>
			</div>
			</div>
			<div id="home"></div>
			<div id="portfolio"></div>
			<div id="about"></div>
			<div id="contact"></div>

Expandir fragmento

— MD Ashik
fuente

3

Solo para complementar la respuesta de @Marcus Ekwall. Al hacer esto, solo obtendrás enlaces de anclaje. Y no tendrá problemas si tiene una combinación de enlaces de anclaje y enlaces regulares.

jQuery(document).ready(function(jQuery) {            
            var topMenu = jQuery("#top-menu"),
                offset = 40,
                topMenuHeight = topMenu.outerHeight()+offset,
                // All list items
                menuItems =  topMenu.find('a[href*="#"]'),
                // Anchors corresponding to menu items
                scrollItems = menuItems.map(function(){
                  var href = jQuery(this).attr("href"),
                  id = href.substring(href.indexOf('#')),
                  item = jQuery(id);
                  //console.log(item)
                  if (item.length) { return item; }
                });

            // so we can get a fancy scroll animation
            menuItems.click(function(e){
              var href = jQuery(this).attr("href"),
                id = href.substring(href.indexOf('#'));
                  offsetTop = href === "#" ? 0 : jQuery(id).offset().top-topMenuHeight+1;
              jQuery('html, body').stop().animate({ 
                  scrollTop: offsetTop
              }, 300);
              e.preventDefault();
            });

            // Bind to scroll
            jQuery(window).scroll(function(){
               // Get container scroll position
               var fromTop = jQuery(this).scrollTop()+topMenuHeight;

               // Get id of current scroll item
               var cur = scrollItems.map(function(){
                 if (jQuery(this).offset().top < fromTop)
                   return this;
               });

               // Get the id of the current element
               cur = cur[cur.length-1];
               var id = cur && cur.length ? cur[0].id : "";               

               menuItems.parent().removeClass("active");
               if(id){
                    menuItems.parent().end().filter("[href*='#"+id+"']").parent().addClass("active");
               }

            })
        })

Básicamente reemplacé

menuItems = topMenu.find("a"),

por

menuItems =  topMenu.find('a[href*="#"]'),

Para hacer coincidir todos los enlaces con el ancla en algún lugar, y cambió todo lo que era necesario para que funcione con este

Véalo en acción en jsfiddle

— Pablo SG Pacheco
fuente

¿Cómo extiendo esto para un menú vertical especialmente cuando el menú es más grande que la página? pyze.com/product/docs/index.html Cuando un usuario se desplaza por el contenido a la derecha, me gustaría activar el menú apropiado a la izquierda y desplazar el menú si es necesario para mostrar el menú activo. Se agradece cualquier sugerencia.

— Dickey Singh

Esto es muy Dios, gracias. Sin embargo, cambiaría el selector de atributos de * = a ^ =. Si usa * =, también verá cosas como google.com/#something aunque se trate de un enlace externo. El selector de atributos se explica bien aquí: w3schools.com/css/css_attribute_selectors.asp

— Jacques

0

Si desea que la respuesta aceptada funcione en JQuery 3, cambie el código de esta manera:

var scrollItems = menuItems.map(function () {
    var id = $(this).attr("href");
    try {
        var item = $(id);
      if (item.length) {
        return item;
      }
    } catch {}
  });

También agregué un try-catch para evitar que javascript se bloquee si no hay ningún elemento junto a esa identificación. Siéntete libre de mejorarlo aún más;)

— Tim Gerhard
fuente