CapaCake/milkblogs-fuwari
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: UX improvements for the TOC component

Browse Source
This commit is contained in:
saicaca
2024-10-27 16:44:12 +08:00
parent 2db5938beb
commit 2b9f6bc5bb
3 changed files with 28 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Layout.astro
+4 -8
View File
@@ -138,12 +138,6 @@ const bannerOffset =
>
<ConfigCarrier></ConfigCarrier>
<GlobalStyles>
{siteConfig.banner.enable && <div id="banner-wrapper" class="absolute -top-[30vh] w-full transition duration-700 overflow-hidden">
<ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]}
src={siteConfig.banner.src} position={siteConfig.banner.position}
>
</ImageWrapper>
</div>}
<slot />
</GlobalStyles>
@@ -414,8 +408,10 @@ let backToTopBtn = document.getElementById('back-to-top-btn');
let toc = document.getElementById('toc-wrapper');
let navbar = document.getElementById('navbar-wrapper')
function scrollFunction() {
let bannerHeight = window.innerHeight * 0.30
if (backToTopBtn) {
if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
if (document.body.scrollTop > bannerHeight || document.documentElement.scrollTop > bannerHeight) {
backToTopBtn.classList.remove('hide')
} else {
backToTopBtn.classList.add('hide')
@@ -423,7 +419,7 @@ function scrollFunction() {
}
if (toc) {
if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
if (document.body.scrollTop > bannerHeight || document.documentElement.scrollTop > bannerHeight) {
toc.classList.remove('toc-hide')
} else {
toc.classList.add('toc-hide')