From 74ed94bec912707f333568397526c724d4dff02e Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Fri, 26 Dec 2025 17:12:17 +0800
Subject: [PATCH] feat: enhance sticky behavior for TOC and code headers in
 responsive design (#669)

---
 assets/css/_core/_media.scss            | 22 ++++++++++++++++++++++
 assets/css/_partials/_single/_code.scss |  5 ++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss
index 9d866bfd..5140d85e 100644
--- a/assets/css/_core/_media.scss
+++ b/assets/css/_core/_media.scss
@@ -147,6 +147,17 @@
   [data-header-desktop='normal'] .page .content [id] {
     #{$rootPrefix}scroll-mt: #{$global-scroll-margin-top};
   }
+  [data-header-desktop='normal'] {
+    #toc-auto,
+    .aside-collection {
+      top: 0;
+    }
+  }
+  [data-header-desktop='sticky'] {
+    .page .content .highlight.code-block .code-header {
+      top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height));
+    }
+  }
 }
 
 @media only screen and (max-width: 680px) {
@@ -175,6 +186,17 @@
   [data-header-mobile='normal'] .page .content [id] {
     #{$rootPrefix}scroll-mt: #{$global-scroll-margin-top};
   }
+  [data-header-mobile='normal'] {
+    #toc-auto,
+    .aside-collection {
+      top: 0;
+    }
+  }
+  [data-header-mobile='sticky'] {
+    .page .content .highlight.code-block .code-header {
+      top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height));
+    }
+  }
   
   %page-style {
     width: 100% !important;
diff --git a/assets/css/_partials/_single/_code.scss b/assets/css/_partials/_single/_code.scss
index 0775680b..5b6c2b5a 100644
--- a/assets/css/_partials/_single/_code.scss
+++ b/assets/css/_partials/_single/_code.scss
@@ -168,6 +168,9 @@ pre {
       line-height: 1.4em;
       color: var(#{$rootPrefix}code-header-color);
       background-color: var(#{$rootPrefix}code-header-background-color);
+      position: sticky;
+      top: var(#{$rootPrefix}breadcrumb-height);
+      @include z-index(0, 1);
       @include border-radius($global-border-radius $global-border-radius 0 0);
       @include transition(border-radius 0s);
 
@@ -212,7 +215,7 @@ pre {
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
-          @include z-index(0, 1);
+          @include z-index(0, 2);
         }
       }