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

refine: smart nav thresholds and improved transitions

Browse Source
This commit is contained in:
Johan Samudio
2026-03-10 11:52:33 -05:00
parent 86e3867609
commit 66e56f6804
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -154,7 +154,7 @@ const onScroll = () => {
scrolled.value = currentScrollY > 40 scrolled.value = currentScrollY > 40
// Lógica de ocultar/mostrar según dirección // Lógica de ocultar/mostrar según dirección
if (currentScrollY > lastScrollY && currentScrollY > 150) { if (currentScrollY > lastScrollY && currentScrollY > 80) {
// Scroll hacia abajo y ya pasamos el hero: ocultar // Scroll hacia abajo y ya pasamos el hero: ocultar
navVisible.value = false navVisible.value = false
} else { } else {
@ -204,11 +204,14 @@ 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 .4s cubic-bezier(0.4, 0, 0.2, 1); transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1),
background .4s cubic-bezier(0.4, 0, 0.2, 1),
height .4s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform, background, height; will-change: transform, background, height;
} }
.nav--hidden { .nav--hidden {
transform: translateY(-100%); transform: translateY(-100%);
pointer-events: none;
} }
.nav--solid { .nav--solid {
background: rgba(255,255,255,.95); background: rgba(255,255,255,.95);
@ -438,7 +441,7 @@ const scrollToInstall = () =>
/* Tablet + */ /* Tablet + */
@media (min-width: 768px) { @media (min-width: 768px) {
.nav { padding: 0 40px; } .nav { padding: 0 40px; }
.hero { padding: 100px 48px 88px; } .hero { padding: 180px 48px 88px; }
.nav__link { display: block; } .nav__link { display: block; }
} }