Prevent the top bar from covering the heading when scrolling down (in mobile views)
This commit is contained in:
parent
b0815b53c0
commit
e7b377cf63
3 changed files with 76 additions and 65 deletions
|
@ -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() */
|
||||||
});
|
});
|
||||||
|
|
2
assets/js/dist/page.min.js
vendored
2
assets/js/dist/page.min.js
vendored
File diff suppressed because one or more lines are too long
2
assets/js/dist/post.min.js
vendored
2
assets/js/dist/post.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue