顶栏增加粘性模式

src/global.d.ts

@@ -113,10 +113,12 @@ declare namespace Settings {
   }
   interface topbar {
     /**
-     * 是否固定顶栏
-     * @默认值 `true`
+     * 模式
+     * @默认值 `'static'` 静止，跟随页面滚动
+     * @可选值 `'fixed'` 固定，不跟随页面滚动，始终固定在顶部
+     * @可选值 `'sticky'` 粘性，页面往下滚动时隐藏，往上滚动时显示
      */
-    fixed?: boolean
+    mode?: 'static' | 'fixed' | 'sticky'
   }
   interface toolbar {
     /**

src/layouts/components/AppSetting/index.vue

@@ -130,9 +130,19 @@ function handleCopy() {
       <el-divider>顶栏</el-divider>
       <div class="setting-item">
         <div class="label">
-          是否固定
+          模式
         </div>
-        <el-switch v-model="settingsStore.topbar.fixed" />
+        <el-radio-group v-model="settingsStore.topbar.mode" size="small">
+          <el-radio-button label="static">
+            静止
+          </el-radio-button>
+          <el-radio-button label="fixed">
+            固定
+          </el-radio-button>
+          <el-radio-button label="sticky">
+            粘性
+          </el-radio-button>
+        </el-radio-group>
       </div>
       <el-divider>工具栏</el-divider>
       <div v-if="settingsStore.mode === 'pc'" class="setting-item">

src/layouts/components/Topbar/index.vue

@@ -29,6 +29,7 @@ const breadcrumbList = computed(() => {
 })
 
 const scrollTop = ref(0)
+const scrollOnHide = ref(false)
 onMounted(() => {
   window.addEventListener('scroll', onScroll)
 })
@@ -36,8 +37,12 @@ onUnmounted(() => {
   window.removeEventListener('scroll', onScroll)
 })
 function onScroll() {
-  scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop
+  scrollTop.value = (document.documentElement || document.body).scrollTop
 }
+watch(scrollTop, (val, oldVal) => {
+  const topbarHeight = parseInt(getComputedStyle(document.documentElement || document.body).getPropertyValue('--g-topbar-height'))
+  scrollOnHide.value = settingsStore.topbar.mode === 'sticky' && val > oldVal && val > topbarHeight
+})
 
 function pathCompile(path: string) {
   const toPath = compile(path)
@@ -48,8 +53,9 @@ function pathCompile(path: string) {
 <template>
   <div
     class="topbar-container" :class="{
-      fixed: settingsStore.topbar.fixed,
+      [`topbar-${settingsStore.topbar.mode}`]: true,
       shadow: scrollTop,
+      hide: scrollOnHide,
     }" data-fixed-calc-width
   >
     <div class="left-box">
@@ -82,7 +88,8 @@ function pathCompile(path: string) {
   background-color: var(--g-toolbar-bg);
   transition: width 0.3s, top 0.3s, transform 0.3s, background-color 0.3s, var(--el-transition-box-shadow);
 
-  &.fixed {
+  &.topbar-fixed,
+  &.topbar-sticky {
     position: fixed;
 
     &.shadow {
@@ -90,6 +97,10 @@ function pathCompile(path: string) {
     }
   }
 
+  &.topbar-sticky.hide {
+    top: calc(var(--g-topbar-height) * -1) !important;
+  }
+
   .left-box {
     display: flex;
     align-items: center;

src/settings.default.ts

@@ -29,7 +29,7 @@ const globalSettingsDefault: RecursiveRequired<Settings.all> = {
     enableHotkeys: false,
   },
   topbar: {
-    fixed: true,
+    mode: 'static',
   },
   toolbar: {
     enableFullscreen: false,

src/settings.ts

@@ -12,6 +12,9 @@ const globalSettings: Settings.all = {
     enableSubMenuCollapseButton: true,
     enableHotkeys: true,
   },
+  topbar: {
+    mode: 'fixed',
+  },
   toolbar: {
     enableFullscreen: true,
     enablePageReload: true,