blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 15:28:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix: fix toc active error when breadcrumb is enabled and set sticky to true (Fixed #368)

Browse Source
This commit is contained in:
Cell
2023-11-03 12:36:56 +08:00
parent d22d261e69
commit d484414e20
5 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/_core/_media.scss
+2 -2
View File
@@ -66,7 +66,7 @@
} }
// adjust the scroll margin top of the content anchors on the page // adjust the scroll margin top of the content anchors on the page
body:not([data-header-desktop='auto']) &+.container .content [id] { body:not([data-header-desktop='auto']) &+.container .content [id] {
scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-offset)); scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-height));
} }
} }
@@ -95,7 +95,7 @@
} }
// adjust the scroll margin top of the content anchors on the page // adjust the scroll margin top of the content anchors on the page
body:not([data-header-mobile='auto']) &+.container .content [id] { body:not([data-header-mobile='auto']) &+.container .content [id] {
scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-offset)); scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-height));
} }
} }
assets/css/_core/_root.scss
-1
View File
@@ -11,5 +11,4 @@
// Scroll margin top and Stack sticky top related // Scroll margin top and Stack sticky top related
--#{$prefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top}); --#{$prefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top});
--#{$prefix}breadcrumb-offset: 2.5rem;
} }
assets/js/theme.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/js/theme.min.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/js/theme.js
+10 -2
View File
@@ -476,6 +476,14 @@ class FixIt {
} }
} }
initBreadcrumb() {
const $breadcrumbContainer = document.querySelector('.breadcrumb-container.sticky')
this.breadcrumbHeight = $breadcrumbContainer?.clientHeight ?? 0;
if (this.breadcrumbHeight) {
document.querySelector('#content')?.style.setProperty('--fi-breadcrumb-height', `${this.breadcrumbHeight}px`);
}
}
initDetails() { initDetails() {
this.util.forEach(document.getElementsByClassName('details'), ($details) => { this.util.forEach(document.getElementsByClassName('details'), ($details) => {
const $summary = $details.querySelector('.details-summary'); const $summary = $details.querySelector('.details-summary');
@@ -645,7 +653,6 @@ class FixIt {
const $tocLinkElements = $tocCore.querySelectorAll('a:first-child'); const $tocLinkElements = $tocCore.querySelectorAll('a:first-child');
const $tocLiElements = $tocCore.getElementsByTagName('li'); const $tocLiElements = $tocCore.getElementsByTagName('li');
const $headerLinkElements = document.getElementsByClassName('header-link'); const $headerLinkElements = document.getElementsByClassName('header-link');
const headerIsFixed = document.body.dataset.headerDesktop !== 'normal';
const headerHeight = document.getElementById('header-desktop').offsetHeight; const headerHeight = document.getElementById('header-desktop').offsetHeight;
document.querySelector('.container').addEventListener('resize', () => { document.querySelector('.container').addEventListener('resize', () => {
$toc.style.marginBottom = `${document.querySelector('.container').clientHeight - document.querySelector('.post-footer').offsetTop}px`; $toc.style.marginBottom = `${document.querySelector('.container').clientHeight - document.querySelector('.post-footer').offsetTop}px`;
@@ -658,7 +665,7 @@ class FixIt {
this.util.forEach($tocLiElements, ($tocLi) => { this.util.forEach($tocLiElements, ($tocLi) => {
$tocLi.classList.remove('has-active'); $tocLi.classList.remove('has-active');
}); });
const INDEX_SPACING = 20 + (headerIsFixed ? headerHeight : 0); const INDEX_SPACING = 20 + (document.body.dataset.headerDesktop !== 'normal' ? headerHeight : 0) + this.breadcrumbHeight;
let activeTocIndex = $headerLinkElements.length - 1; let activeTocIndex = $headerLinkElements.length - 1;
for (let i = 0; i < $headerLinkElements.length - 1; i++) { for (let i = 0; i < $headerLinkElements.length - 1; i++) {
const thisTop = $headerLinkElements[i].getBoundingClientRect().top; const thisTop = $headerLinkElements[i].getBoundingClientRect().top;
@@ -1314,6 +1321,7 @@ class FixIt {
this.initMenu(); this.initMenu();
this.initSwitchTheme(); this.initSwitchTheme();
this.initSearch(); this.initSearch();
this.initBreadcrumb();
this.initCookieconsent(); this.initCookieconsent();
this.initSiteTime(); this.initSiteTime();
this.initServiceWorker(); this.initServiceWorker();