cómo usar scrollspy sin usar bootstrap

Nuestro grupo de trabajo ha estado mucho tiempo investigando la respuesta a tus dudas, te brindamos la soluciones así que esperamos que sea de mucha ayuda.

Si alguien todavía está interesado en esto, no pude hacer que Bootstrap Scrollspy funcionara lo suficientemente rápido, así que escribí mi propia solución (técnicamente ineficiente, pero simple).

Aquí hay una demostración:

$(window).bind('scroll', function() 
    var currentTop = $(window).scrollTop();
    var elems = $('.scrollspy');
    elems.each(function(index)
      var elemTop 	= $(this).offset().top;
      var elemBottom 	= elemTop + $(this).height();
      if(currentTop >= elemTop && currentTop <= elemBottom)
        var id 		= $(this).attr('id');
        var navElem = $('a[href="#' + id+ '"]');
    navElem.parent().addClass('active').siblings().removeClass( 'active' );
      
    )
); 

.active
  color: red;
  background-color: red;


#nav
  position:fixed;
  top:0;
  right:50%;


section
  min-height: 500px;

	
    
   
   
      

      

      Home
      

      

      AboutUs
      

      

      Images
      

      

      Contact
      

Para solucionar esto, escribí mi propio complemento. Que se puede encontrar aquí:

https://github.com/r3plica/Scrollspy

Si para ti ha resultado de utilidad este post, sería de mucha ayuda si lo compartieras con el resto juniors así contrubuyes a difundir este contenido.

---

---

Utiliza Nuestro Buscador