Prevent the top bar from covering the heading when scrolling down (in mobile views)

This commit is contained in:
Cotes Chung 2022-01-05 22:56:33 +08:00
parent b0815b53c0
commit e7b377cf63
3 changed files with 76 additions and 65 deletions

View file

@ -21,81 +21,92 @@ $(function() {
.not("[href='#']") .not("[href='#']")
.not("[href='#0']") .not("[href='#0']")
.click(function(event) { .click(function(event) {
if (this.pathname.replace(/^\//, "") === location.pathname.replace(/^\//, "")) {
if (location.hostname === this.hostname) {
const hash = decodeURI(this.hash);
let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
let toFootnote = toFootnoteRef? false : RegExp(/^#fn:/).test(hash);
let selector = hash.includes(":") ? hash.replace(/\:/g, "\\:") : hash;
let $target = $(selector);
let parent = $(this).parent().prop("tagName"); if (this.pathname.replace(/^\//, "") !== location.pathname.replace(/^\//, "")) {
let isAnchor = RegExp(/^H\d/).test(parent); return;
let isMobileViews = !$topbarTitle.is(":hidden"); }
if (typeof $target !== "undefined") { if (location.hostname !== this.hostname) {
event.preventDefault(); return;
}
if (history.pushState) { /* add hash to URL */ const hash = decodeURI(this.hash);
history.pushState(null, null, hash); let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
} let toFootnote = toFootnoteRef ? false : RegExp(/^#fn:/).test(hash);
let selector = hash.includes(":") ? hash.replace(/\:/g, "\\:") : hash;
let $target = $(selector);
let curOffset = isAnchor? $(this).offset().top : $(window).scrollTop(); let parent = $(this).parent().prop("tagName");
let destOffset = $target.offset().top -= REM / 2; let isAnchor = RegExp(/^H\d/).test(parent);
let isMobileViews = !$topbarTitle.is(":hidden");
if (destOffset < curOffset) { // scroll up if (typeof $target === "undefined") {
if (!isAnchor && !toFootnote) { // trigger by ToC item return;
if (!isMobileViews) { // on desktop/tablet screens }
$topbarWrapper.removeClass("topbar-down").addClass("topbar-up");
// Send message to `${JS_ROOT}/commons/topbar-switch.js`
$topbarWrapper.attr(ATTR_TOC_SCROLLING, true);
tocScrollUpCount += 1;
}
}
if ((isAnchor || toFootnoteRef) && isMobileViews) { event.preventDefault();
destOffset -= topbarHeight;
}
}
$("html").animate({ if (history.pushState) { /* add hash to URL */
scrollTop: destOffset history.pushState(null, null, hash);
}, 500, () => { }
$target.focus();
/* clean up old scroll mark */ let curOffset = isAnchor ? $(this).offset().top : $(window).scrollTop();
if ($(`[${SCROLL_MARK}=true]`).length) { let destOffset = $target.offset().top -= REM / 2;
$(`[${SCROLL_MARK}=true]`).attr(SCROLL_MARK, false);
}
/* Clean :target links */ if (destOffset < curOffset) { // scroll up
if ($(":target").length) { /* element that visited by the URL with hash */ if (!isAnchor && !toFootnote) { // trigger by ToC item
$(":target").attr(SCROLL_MARK, false); if (!isMobileViews) { // on desktop/tablet screens
} $topbarWrapper.removeClass("topbar-down").addClass("topbar-up");
// Send message to `${JS_ROOT}/commons/topbar-switch.js`
/* set scroll mark to footnotes */ $topbarWrapper.attr(ATTR_TOC_SCROLLING, true);
if (toFootnote || toFootnoteRef) { tocScrollUpCount += 1;
$target.attr(SCROLL_MARK, true);
}
if ($target.is(":focus")) { /* Checking if the target was focused */
return false;
} else {
$target.attr("tabindex", "-1"); /* Adding tabindex for elements not focusable */
$target.focus(); /* Set focus again */
}
if (typeof $topbarWrapper.attr(ATTR_TOC_SCROLLING) !== "undefined") {
tocScrollUpCount -= 1;
if (tocScrollUpCount <= 0) {
$topbarWrapper.attr(ATTR_TOC_SCROLLING, "false");
}
}
});
} }
} }
if ((isAnchor || toFootnoteRef) && isMobileViews) {
destOffset -= topbarHeight;
}
} else {
if (isMobileViews) {
destOffset -= topbarHeight;
}
} }
$("html").animate({
scrollTop: destOffset
}, 500, () => {
$target.focus();
/* clean up old scroll mark */
if ($(`[${SCROLL_MARK}=true]`).length) {
$(`[${SCROLL_MARK}=true]`).attr(SCROLL_MARK, false);
}
/* Clean :target links */
if ($(":target").length) { /* element that visited by the URL with hash */
$(":target").attr(SCROLL_MARK, false);
}
/* set scroll mark to footnotes */
if (toFootnote || toFootnoteRef) {
$target.attr(SCROLL_MARK, true);
}
if ($target.is(":focus")) { /* Checking if the target was focused */
return false;
} else {
$target.attr("tabindex", "-1"); /* Adding tabindex for elements not focusable */
$target.focus(); /* Set focus again */
}
if (typeof $topbarWrapper.attr(ATTR_TOC_SCROLLING) !== "undefined") {
tocScrollUpCount -= 1;
if (tocScrollUpCount <= 0) {
$topbarWrapper.attr(ATTR_TOC_SCROLLING, "false");
}
}
});
}); /* click() */ }); /* click() */
}); });

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long