0

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 estointroducir la descripción de la imagen aquí

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 imagenintroducir la descripción de la imagen aquí

y deberia de quedar asiintroducir la descripción de la imagen aquí

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>
desde ya muchas gracias por su ayuda nota no puedo usar librerias,solo vanilla js

2
  • Tercer problema: Los ID deben ser únicos y tienes 4 elementos con id="navbutton"
    – Triby
    Commented el 24 jun. 2020 a las 15:21
  • @Triby gracias, habia olvidado cambiarlo Commented el 24 jun. 2020 a las 16:08

1 respuesta 1

1

Puedes crear una pequeña función que chequee si los elementos respectivos (en este caso tus secciones) se encuentran dentro del viewport del usuario. La función retorna true si está dentro del Viewport respectivo.

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  const html = document.documentElement;
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || html.clientHeight) &&
    rect.right <= (window.innerWidth || html.clientWidth)
  );
}

Luego, necesitas crear un id o una clase única para el elemento del nav, y en base a eso encontrar los nodos de la sección y el nav correspondiente

const categoriesSection = document.getElementById("categories");
const categoriesNav = document.getElementById("categories-nav");

Finalmente, puedes añadirle un event listener de tipo scroll al navegador, y llamar a la función creada. Si la sección está dentro del Viewport, puedes agregarle la clase active al nav respectivo

window.addEventListener("scroll", function (e) {
  const categoriesIsInViewport = isInViewport(categoriesSection);
  if (categoriesIsInViewport) {
    categoriesNav.classList.add("active");
  } else {
    categoriesNav.classList.remove("active");
  }
});

Puedes hacer esto con cada elemento de tu nav

1
  • 1
    muchas gracias me funciono! Commented el 24 jun. 2020 a las 16:09

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.