0
  <html>
    <div id="navbar">
        <div  class="ui secondary inverted pointing top fixed menu">
            <div class="ui container">
                <a id="brand-item" class="item" href="index.html">
                    <img class="ui image" src="assets/img/logo.png">
                </a>
                <div id="right-menu" class="right menu " >
                    <a class="item" href="#about">¿Cómo funciona?</a>
                    <a class="item" href="#register">Registrarme</a>
                    <a class="item" href="#blog">Blog</a>
                    <a class="item" href="timeline.html">Trayectoria</a>
                </div>
                 <div  class="mobile-navbar-toggler ">
                    <i style="color: white; font-size: 25px" class="fa fa bars"></i>
                </div>
            </div>
        </div>
    </div>
  <section id="about"></section>

   <section id="register"></section>

     <section id="blog"></section>
 </html>
1
  • 1
    Hola Edgar, Bienvenido a StackOverflow. Te invito a realizar el recorrido para observar mejor el funcionamiento del sitio y así ganar tu primera medalla! También te invito a revisar ¿Cómo elaboro una buena pregunta?. Un saludo!
    – Eztronics
    Commented el 26 jun. 2018 a las 12:32

1 respuesta 1

4

Lo que usted quiere hacer se conoce como scroll spy. Tienes dos opciones:

Utilizar alguna librería que haga esto por usted:

https://plugins.jquery.com/scrollSpy/

https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

o hacerlo manualmente mediante javascript. En este caso debera usar un evento de la siguiente manera

 window.addEventListener('scroll', function () {
   let heightTotal = document.body.scrollHeight;
   if (window.pageYOffset >= heightTotal) {
     let item = document.querySelector('.item1');
     item.classList.contains('someClass');
     item.classList.add('newClass');
     item.classList.remove('otherClass');
   }
 })

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.