feat: enhance sticky behavior for TOC and code headers in responsive design (#669)

This commit is contained in:
Cell
2025-12-26 17:12:17 +08:00
committed by GitHub
parent 37a799b2cb
commit 74ed94bec9
2 changed files with 26 additions and 1 deletions
+22
View File
@@ -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;
+4 -1
View File
@@ -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);
}
}