Skip to content

Commit

Permalink
fix: 解决关闭主题切换后会导致回到顶部也失效的问题
Browse files Browse the repository at this point in the history
Fixed #589
  • Loading branch information
LIlGG committed Dec 22, 2024
1 parent 82b2340 commit 92bc765
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 26 deletions.
62 changes: 43 additions & 19 deletions src/module/events.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,32 +74,56 @@ export class Events {
@documentFunction(false)
public registerScrollEvent() {
const offset = (document.querySelector(".site-header") as HTMLElement)?.offsetHeight || 75;
const backToTopElement = document.querySelector(".cd-top") as HTMLElement;
const mobileBackToTopElement = document.querySelector(".m-cd-top") as HTMLElement;
const changeSkinElement = document.querySelector(".change-skin-gear") as HTMLDivElement;
const mobileChangeSkinElement = document.querySelector(".mobile-change-skin") as HTMLDivElement;
window.addEventListener("scroll", () => {
if (document.documentElement.scrollTop > offset) {
backToTopElement?.classList.add("cd-is-visible");
changeSkinElement.style.bottom = "0";
if (backToTopElement.offsetHeight > window.innerHeight) {
backToTopElement.style.top = `${window.innerHeight - backToTopElement.offsetHeight - offset}px`;
const backToTopElement = document.querySelector(".cd-top") as HTMLElement | null;
const mobileBackToTopElement = document.querySelector(".m-cd-top") as HTMLElement | null;
const changeSkinElement = document.querySelector(".change-skin-gear") as HTMLElement | null;
const mobileChangeSkinElement = document.querySelector(".mobile-change-skin") as HTMLElement | null;

const toggleBackToTopVisibility = (isVisible: boolean) => {
if (backToTopElement) {
if (isVisible) {
backToTopElement.classList.add("cd-is-visible");
} else {
backToTopElement.style.top = "0";
backToTopElement.classList.remove("cd-is-visible");
}
} else {
backToTopElement.style.top = "-900px";
backToTopElement?.classList.remove("cd-is-visible");
changeSkinElement.style.bottom = "-100px";
}
};

const updateBackToTopPosition = () => {
if (backToTopElement) {
const backToTopOffset = backToTopElement.offsetHeight || 0;
if (document.documentElement.scrollTop > offset) {
backToTopElement.style.top = backToTopOffset > window.innerHeight
? `${window.innerHeight - backToTopOffset - offset}px`
: "0";
} else {
backToTopElement.style.top = "-900px";
}
}
};

const updateChangeSkinPosition = () => {
if (changeSkinElement) {
changeSkinElement.style.bottom = document.documentElement.scrollTop > offset ? "0" : "-100px";
}
};

const toggleMobileVisibility = () => {
if (document.documentElement.scrollTop > 0) {
mobileBackToTopElement.classList.add("cd-is-visible");
mobileChangeSkinElement.classList.add("cd-is-visible");
mobileBackToTopElement?.classList.add("cd-is-visible");
mobileChangeSkinElement?.classList.add("cd-is-visible");
} else {
mobileBackToTopElement.classList.remove("cd-is-visible");
mobileChangeSkinElement.classList.remove("cd-is-visible");
mobileBackToTopElement?.classList.remove("cd-is-visible");
mobileChangeSkinElement?.classList.remove("cd-is-visible");
}
};

// 滚动事件监听
window.addEventListener("scroll", () => {
toggleBackToTopVisibility(document.documentElement.scrollTop > offset);
updateBackToTopPosition();
updateChangeSkinPosition();
toggleMobileVisibility();
});
}

Expand Down
8 changes: 4 additions & 4 deletions templates/assets/dist/main.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion templates/assets/dist/page/categories.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion templates/assets/dist/page/index.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion templates/assets/dist/page/photos.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 92bc765

Please sign in to comment.