Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

barra de navegación: logo 150px y animación inteligente al scroll

Browse Source
This commit is contained in:
Johan Samudio
2026-03-10 11:30:21 -05:00
parent 72163062a7
commit 4c91083219
1 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/views/LandingView.vue
View File

@ -2,7 +2,7 @@
<div class="page"> <div class="page">
<!-- NAV --> <!-- NAV -->
<nav class="nav" :class="{ 'nav--solid': scrolled }"> <nav class="nav" :class="{ 'nav--solid': scrolled, 'nav--hidden': !navVisible }">
<div class="nav__wrap"> <div class="nav__wrap">
<img src="/titulosib.png" alt="SIB" class="nav__logo" /> <img src="/titulosib.png" alt="SIB" class="nav__logo" />
<div class="nav__actions"> <div class="nav__actions">
@ -144,11 +144,29 @@ import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
const scrolled = ref(false) 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(() => { onMounted(() => {
window.addEventListener('scroll', onScroll) window.addEventListener('scroll', onScroll, { passive: true })
const isStandalone = const isStandalone =
window.matchMedia('(display-mode: standalone)').matches || window.matchMedia('(display-mode: standalone)').matches ||
(window.navigator as any).standalone === true (window.navigator as any).standalone === true
@ -186,7 +204,11 @@ const scrollToInstall = () =>
.nav { .nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100; position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: 160px; display: flex; align-items: center; padding: 0 24px; 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 { .nav--solid {
background: rgba(255,255,255,.95); background: rgba(255,255,255,.95);