<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>
-
1Hola 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!– EztronicsCommented el 26 jun. 2018 a las 12:32
Añade un comentario
|
1 respuesta
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');
}
})