@@ -144,11 +144,29 @@ import { useRouter } from 'vue-router'
const router = useRouter()
const scrolled = ref(false)
+const navVisible = ref(true)
+let lastScrollY = 0
-const onScroll = () => { scrolled.value = window.scrollY > 40 }
+const onScroll = () => {
+ const currentScrollY = window.scrollY
+
+ // Estilo sólido de la nav
+ scrolled.value = currentScrollY > 40
+
+ // Lógica de ocultar/mostrar según dirección
+ if (currentScrollY > lastScrollY && currentScrollY > 150) {
+ // Scroll hacia abajo y ya pasamos el hero: ocultar
+ navVisible.value = false
+ } else {
+ // Scroll hacia arriba o estamos al inicio: mostrar
+ navVisible.value = true
+ }
+
+ lastScrollY = currentScrollY
+}
onMounted(() => {
- window.addEventListener('scroll', onScroll)
+ window.addEventListener('scroll', onScroll, { passive: true })
const isStandalone =
window.matchMedia('(display-mode: standalone)').matches ||
(window.navigator as any).standalone === true
@@ -186,7 +204,11 @@ const scrollToInstall = () =>
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: 160px; display: flex; align-items: center; padding: 0 24px;
- transition: all .3s ease;
+ transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
+ will-change: transform, background, height;
+}
+.nav--hidden {
+ transform: translateY(-100%);
}
.nav--solid {
background: rgba(255,255,255,.95);