hola buen dia estoy trabajando una landing page y programe un smooth scroll usando js vanilla y los problemas son primer problema tengo una navbar fija y quiero mostrarle al usuario donde esta, algo como esto
y que funcione si no le doy click al boton,que sea automatico si hago scroll hasta la seccion contactos el navbar muestre el boton en activo
mi segundo problema es que cuando hago click me lleva muy abajo de la seccion y no me muestra el titulo de la seccion adjunto imagen
mi codigo js y html para el smooth scroll es este
const links = document.querySelectorAll(".navbar ul a");
for (const link of links) {
link.addEventListener("click", clickHandler);
}
function clickHandler(e) {
e.preventDefault();
const href = this.getAttribute("href");
document.querySelector(href).scrollIntoView({
behavior: "smooth",
block: "start",
});
}
<header>
<nav class="navbar">
<div class="logo">
<i class="fal fa-meteor" id="logo"></i>
</div>
<ul>
<li>
<a href="#inicio" id="inicio">Inicio</a>
</li>
<li>
<a href="#categorias" id="categoriasnav">Categorias</a>
</li>
<li>
<a href="#masvendidos" id="masvendidosnav">Mas Vendidos</a>
</li>
<li>
<a href="#contactanos" id="contactanosnav">Contactanos</a>
</li>
</ul>
</nav>
</header>
<section id='home'>
<h1>home</h1>
</section>
<section id='categorias'>
<h1>categorias</h1>
</section>
<section id='masventas'>
<h1>top de ventas</h1>
</section>
<section id='contactanos'>
<h1>contactanos</h1>
</section>
id="navbutton"