diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index a0f258f29d7f..f6fdcd5f3018 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
-import { computed } from 'vue'
+import { ref, watchPostEffect } from 'vue'
+import { useData } from '../composables/data'
 import { useSidebar } from '../composables/sidebar'
 import VPNavBarAppearance from './VPNavBarAppearance.vue'
 import VPNavBarExtra from './VPNavBarExtra.vue'
@@ -21,11 +22,16 @@ defineEmits<{
 
 const { y } = useWindowScroll()
 const { hasSidebar } = useSidebar()
+const { frontmatter } = useData()
 
-const classes = computed(() => ({
-  'has-sidebar': hasSidebar.value,
-  fill: y.value > 0
-}))
+const classes = ref<Record<string, boolean>>({})
+
+watchPostEffect(() => {
+  classes.value = {
+    'has-sidebar': hasSidebar.value,
+    top: frontmatter.value?.layout === 'home' && y.value === 0,
+  }
+})
 </script>
 
 <template>
@@ -77,7 +83,7 @@ const classes = computed(() => ({
     padding: 0;
   }
 
-  .VPNavBar.fill:not(.has-sidebar) {
+  .VPNavBar:not(.has-sidebar):not(.top) {
     border-bottom-color: var(--vp-c-gutter);
     background-color: var(--vp-nav-bg-color);
   }
@@ -162,8 +168,7 @@ const classes = computed(() => ({
 }
 
 @media (min-width: 960px) {
-  .VPNavBar.has-sidebar .content-body,
-  .VPNavBar.fill .content-body {
+  .VPNavBar:not(.top) .content-body{
     position: relative;
     background-color: var(--vp-nav-bg-color);
   }