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!
    – Art_Code
    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 that you have read and understand our privacy policy and code of conduct.

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