Cómo mostrar un menú secundario al desplazarse por la página en Divi y WordPress sin plugins

En este tutorial gratuito para el canal de YouTube, te mostraré cómo implementar un menú secundario que aparece al desplazarse por la página en Divi Theme Builder y WordPress, sin necesidad de recurrir a plugins adicionales.

Este efecto ha sido muy solicitado por varios de ustedes, ya que, aunque Divi permite crear menús personalizados desde el Theme Builder, las opciones para agregar efectos más avanzados, como un segundo menú que se muestra al hacer scroll, siguen siendo algo limitadas. Sin embargo, con el enfoque que te enseñaré en este tutorial, podrás superar estas limitaciones y darle a tu sitio web un toque más profesional y dinámico.

¿Por qué agregar un menú secundario al hacer scroll?

Incluir un menú secundario que se muestra al desplazarse puede mejorar la experiencia de usuario, facilitando la navegación y permitiendo acceso rápido a secciones importantes. Es especialmente útil en páginas largas donde tener un menú fijo adicional ayuda a mantener a los usuarios enfocados en el contenido.

¿Qué aprenderás en este tutorial?

En el video, aprenderás a:

1. Configurar un menú secundario en Divi que solo se muestra cuando el usuario se desplaza hacia abajo.
2. Personalizar el estilo del menú para que se adapte al diseño de tu sitio.
3. Agregar funcionalidades sin usar plugins, manteniendo tu sitio ligero y optimizado.

¿Para quién es este tutorial?

Este tutorial está pensado para diseñadores y desarrolladores que trabajan con Divi y quieren maximizar las capacidades del Theme Builder, creando efectos personalizados sin sobrecargar el sitio con plugins adicionales. Si buscas optimizar la navegación de tus proyectos y aprender nuevas técnicas para personalizar Divi, este tutorial es para ti.

Recursos que vamos a necesitar

1. Fragmento CSS para ocultar la sección del menú secundario:

position: fixed;
top: 0;
left: 0;
right: 0;
transition: transform 0.3s ease-in-out;
transform: translateY(-100%);

2. Fragmente de código CSS:

#headerScroll.visible {
  transform: translateY(0);
}

3. Código Funcionalidad Scroll Header:

<script>
const header = document.getElementById('headerScroll');
let lastScrollTop = 0;

window.addEventListener('scroll', () => {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
  if (scrollTop > 200) {
      header.classList.add('visible');
  } else {
      header.classList.remove('visible');
  }
    
  lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
}, false);
</script>

¡Te invito a ver el tutorial y poner en práctica lo aprendido! Si tienes alguna pregunta o sugerencia, no dudes en dejar un comentario en el video. ¡Nos vemos en el siguiente tutorial!