优化垂直导航栏样式

This commit is contained in:
jxxghp
2025-07-09 19:53:14 +08:00
parent d57c8aa305
commit 79ae772367
3 changed files with 20 additions and 13 deletions

View File

@@ -28,10 +28,9 @@ $header: ".layout-navbar";
// Scrolled styles for sticky navbar
@at-root {
/* This html selector with not selector is required when:
dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and out style broke
/* Only apply scrolled styles when window is actually scrolled,
not when dialog is opened without scroll
*/
html.v-overlay-scroll-blocked .layout-navbar-fixed,
&.window-scrolled.layout-navbar-fixed {
#{$header} {
@@ -43,6 +42,21 @@ $header: ".layout-navbar";
@extend %blurry-bg;
}
}
/* Ensure header styles are preserved when dialog is opened,
regardless of scroll state
*/
html.v-overlay-scroll-blocked &.window-scrolled.layout-navbar-fixed {
#{$header} {
@extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
@extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
}
.navbar-blur#{$header} {
@extend %blurry-bg;
}
}
}
}

View File

@@ -1,6 +1,5 @@
%blurry-bg {
position: relative;
background: rgba(var(--v-theme-background), 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
@media (width > 768px) {

View File

@@ -6,21 +6,15 @@
html.v-overlay-scroll-blocked {
position: fixed;
position: relative;
--v-body-scroll-y: 0px !important;
}
/* 防止Chrome移动端下拉刷新干扰 */
body {
overscroll-behavior: none;
}
@media (width <= 768px){
html.v-overlay-scroll-blocked {
position: relative;
--v-body-scroll-y: 0px !important;
}
}
@mixin hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;