mirror of
https://github.com/cotes2020/jekyll-theme-chirpy.git
synced 2025-12-18 05:41:31 +00:00
style: 4 space indents to the JS files
This commit is contained in:
Cotes Chung
@@ -1,20 +1,20 @@
|
||||
/*
|
||||
Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
|
||||
*/
|
||||
/**
|
||||
* Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
|
||||
*/
|
||||
$(function() {
|
||||
$(window).scroll(() => {
|
||||
if ($(this).scrollTop() > 50 &&
|
||||
$("#sidebar-trigger").css("display") === "none") {
|
||||
$("#back-to-top").fadeIn();
|
||||
} else {
|
||||
$("#back-to-top").fadeOut();
|
||||
}
|
||||
});
|
||||
$(window).scroll(() => {
|
||||
if ($(this).scrollTop() > 50 &&
|
||||
$("#sidebar-trigger").css("display") === "none") {
|
||||
$("#back-to-top").fadeIn();
|
||||
} else {
|
||||
$("#back-to-top").fadeOut();
|
||||
}
|
||||
});
|
||||
|
||||
$("#back-to-top").click(() => {
|
||||
$("body,html").animate({
|
||||
scrollTop: 0
|
||||
}, 800);
|
||||
return false;
|
||||
});
|
||||
$("#back-to-top").click(() => {
|
||||
$("body,html").animate({
|
||||
scrollTop: 0
|
||||
}, 800);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
/*
|
||||
/**
|
||||
* Listener for theme mode toggle
|
||||
*/
|
||||
$(function() {
|
||||
$(".mode-toggle").click((e) => {
|
||||
const $target = $(e.target);
|
||||
let $btn = ($target.prop("tagName") === "button".toUpperCase() ?
|
||||
$target : $target.parent());
|
||||
$(function () {
|
||||
$(".mode-toggle").click((e) => {
|
||||
const $target = $(e.target);
|
||||
let $btn = ($target.prop("tagName") === "button".toUpperCase() ?
|
||||
$target : $target.parent());
|
||||
|
||||
$btn.blur(); // remove the clicking outline
|
||||
flipMode();
|
||||
});
|
||||
$btn.blur(); // remove the clicking outline
|
||||
flipMode();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -2,35 +2,37 @@
|
||||
* A tool for smooth scrolling and topbar switcher
|
||||
*/
|
||||
const ScrollHelper = (function () {
|
||||
const $body = $("body");
|
||||
const ATTR_TOPBAR_VISIBLE = "data-topbar-visible";
|
||||
const topbarHeight = $("#topbar-wrapper").outerHeight();
|
||||
const $body = $("body");
|
||||
const ATTR_TOPBAR_VISIBLE = "data-topbar-visible";
|
||||
const topbarHeight = $("#topbar-wrapper").outerHeight();
|
||||
|
||||
let scrollUpCount = 0; // the number of times the scroll up was triggered by ToC or anchor
|
||||
let topbarLocked = false;
|
||||
let orientationLocked = false;
|
||||
let scrollUpCount = 0; // the number of times the scroll up was triggered by ToC or anchor
|
||||
let topbarLocked = false;
|
||||
let orientationLocked = false;
|
||||
|
||||
return {
|
||||
hideTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, false),
|
||||
showTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, true),
|
||||
return {
|
||||
hideTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, false),
|
||||
showTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, true),
|
||||
|
||||
// scroll up
|
||||
// scroll up
|
||||
|
||||
addScrollUpTask: () => {
|
||||
scrollUpCount += 1;
|
||||
if (!topbarLocked) { topbarLocked = true; }
|
||||
},
|
||||
popScrollUpTask: () => scrollUpCount -= 1,
|
||||
hasScrollUpTask: () => scrollUpCount > 0,
|
||||
topbarLocked: () => topbarLocked === true,
|
||||
unlockTopbar: () => topbarLocked = false,
|
||||
getTopbarHeight: () => topbarHeight,
|
||||
addScrollUpTask: () => {
|
||||
scrollUpCount += 1;
|
||||
if (!topbarLocked) {
|
||||
topbarLocked = true;
|
||||
}
|
||||
},
|
||||
popScrollUpTask: () => scrollUpCount -= 1,
|
||||
hasScrollUpTask: () => scrollUpCount > 0,
|
||||
topbarLocked: () => topbarLocked === true,
|
||||
unlockTopbar: () => topbarLocked = false,
|
||||
getTopbarHeight: () => topbarHeight,
|
||||
|
||||
// orientation change
|
||||
// orientation change
|
||||
|
||||
orientationLocked: () => orientationLocked === true,
|
||||
lockOrientation: () => orientationLocked = true,
|
||||
unLockOrientation: () => orientationLocked = false
|
||||
};
|
||||
orientationLocked: () => orientationLocked === true,
|
||||
lockOrientation: () => orientationLocked = true,
|
||||
unLockOrientation: () => orientationLocked = false
|
||||
};
|
||||
|
||||
}());
|
||||
|
||||
@@ -1,129 +1,129 @@
|
||||
/*
|
||||
* This script make #search-result-wrapper switch to unloaded or shown automatically.
|
||||
*/
|
||||
/**
|
||||
* This script make #search-result-wrapper switch to unloaded or shown automatically.
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
const btnSbTrigger = $("#sidebar-trigger");
|
||||
const btnSearchTrigger = $("#search-trigger");
|
||||
const btnCancel = $("#search-cancel");
|
||||
const main = $("#main");
|
||||
const topbarTitle = $("#topbar-title");
|
||||
const searchWrapper = $("#search-wrapper");
|
||||
const resultWrapper = $("#search-result-wrapper");
|
||||
const results = $("#search-results");
|
||||
const input = $("#search-input");
|
||||
const hints = $("#search-hints");
|
||||
$(function () {
|
||||
const btnSbTrigger = $("#sidebar-trigger");
|
||||
const btnSearchTrigger = $("#search-trigger");
|
||||
const btnCancel = $("#search-cancel");
|
||||
const main = $("#main");
|
||||
const topbarTitle = $("#topbar-title");
|
||||
const searchWrapper = $("#search-wrapper");
|
||||
const resultWrapper = $("#search-result-wrapper");
|
||||
const results = $("#search-results");
|
||||
const input = $("#search-input");
|
||||
const hints = $("#search-hints");
|
||||
|
||||
const scrollBlocker = (function () {
|
||||
let offset = 0;
|
||||
return {
|
||||
block() {
|
||||
offset = window.scrollY;
|
||||
$("html,body").scrollTop(0);
|
||||
},
|
||||
release() {
|
||||
$("html,body").scrollTop(offset);
|
||||
},
|
||||
getOffset() {
|
||||
return offset;
|
||||
}
|
||||
};
|
||||
}());
|
||||
const scrollBlocker = (function () {
|
||||
let offset = 0;
|
||||
return {
|
||||
block() {
|
||||
offset = window.scrollY;
|
||||
$("html,body").scrollTop(0);
|
||||
},
|
||||
release() {
|
||||
$("html,body").scrollTop(offset);
|
||||
},
|
||||
getOffset() {
|
||||
return offset;
|
||||
}
|
||||
};
|
||||
}());
|
||||
|
||||
/*--- Actions in mobile screens (Sidebar hidden) ---*/
|
||||
/*--- Actions in mobile screens (Sidebar hidden) ---*/
|
||||
|
||||
const mobileSearchBar = (function () {
|
||||
return {
|
||||
on() {
|
||||
btnSbTrigger.addClass("unloaded");
|
||||
topbarTitle.addClass("unloaded");
|
||||
btnSearchTrigger.addClass("unloaded");
|
||||
searchWrapper.addClass("d-flex");
|
||||
btnCancel.addClass("loaded");
|
||||
},
|
||||
off() {
|
||||
btnCancel.removeClass("loaded");
|
||||
searchWrapper.removeClass("d-flex");
|
||||
btnSbTrigger.removeClass("unloaded");
|
||||
topbarTitle.removeClass("unloaded");
|
||||
btnSearchTrigger.removeClass("unloaded");
|
||||
}
|
||||
};
|
||||
}());
|
||||
const mobileSearchBar = (function () {
|
||||
return {
|
||||
on() {
|
||||
btnSbTrigger.addClass("unloaded");
|
||||
topbarTitle.addClass("unloaded");
|
||||
btnSearchTrigger.addClass("unloaded");
|
||||
searchWrapper.addClass("d-flex");
|
||||
btnCancel.addClass("loaded");
|
||||
},
|
||||
off() {
|
||||
btnCancel.removeClass("loaded");
|
||||
searchWrapper.removeClass("d-flex");
|
||||
btnSbTrigger.removeClass("unloaded");
|
||||
topbarTitle.removeClass("unloaded");
|
||||
btnSearchTrigger.removeClass("unloaded");
|
||||
}
|
||||
};
|
||||
}());
|
||||
|
||||
const resultSwitch = (function () {
|
||||
let visible = false;
|
||||
const resultSwitch = (function () {
|
||||
let visible = false;
|
||||
|
||||
return {
|
||||
on() {
|
||||
if (!visible) {
|
||||
// the block method must be called before $(#main) unloaded.
|
||||
scrollBlocker.block();
|
||||
resultWrapper.removeClass("unloaded");
|
||||
main.addClass("unloaded");
|
||||
visible = true;
|
||||
}
|
||||
},
|
||||
off() {
|
||||
if (visible) {
|
||||
results.empty();
|
||||
if (hints.hasClass("unloaded")) {
|
||||
hints.removeClass("unloaded");
|
||||
}
|
||||
resultWrapper.addClass("unloaded");
|
||||
main.removeClass("unloaded");
|
||||
return {
|
||||
on() {
|
||||
if (!visible) {
|
||||
// the block method must be called before $(#main) unloaded.
|
||||
scrollBlocker.block();
|
||||
resultWrapper.removeClass("unloaded");
|
||||
main.addClass("unloaded");
|
||||
visible = true;
|
||||
}
|
||||
},
|
||||
off() {
|
||||
if (visible) {
|
||||
results.empty();
|
||||
if (hints.hasClass("unloaded")) {
|
||||
hints.removeClass("unloaded");
|
||||
}
|
||||
resultWrapper.addClass("unloaded");
|
||||
main.removeClass("unloaded");
|
||||
|
||||
// now the release method must be called after $(#main) display
|
||||
scrollBlocker.release();
|
||||
// now the release method must be called after $(#main) display
|
||||
scrollBlocker.release();
|
||||
|
||||
input.val("");
|
||||
visible = false;
|
||||
}
|
||||
},
|
||||
isVisible() {
|
||||
return visible;
|
||||
}
|
||||
};
|
||||
input.val("");
|
||||
visible = false;
|
||||
}
|
||||
},
|
||||
isVisible() {
|
||||
return visible;
|
||||
}
|
||||
};
|
||||
|
||||
}());
|
||||
}());
|
||||
|
||||
function isMobileView() {
|
||||
return btnCancel.hasClass("loaded");
|
||||
}
|
||||
|
||||
btnSearchTrigger.click(function() {
|
||||
mobileSearchBar.on();
|
||||
resultSwitch.on();
|
||||
input.focus();
|
||||
});
|
||||
|
||||
btnCancel.click(function() {
|
||||
mobileSearchBar.off();
|
||||
resultSwitch.off();
|
||||
});
|
||||
|
||||
input.focus(function() {
|
||||
searchWrapper.addClass("input-focus");
|
||||
});
|
||||
|
||||
input.focusout(function() {
|
||||
searchWrapper.removeClass("input-focus");
|
||||
});
|
||||
|
||||
input.on("input", () => {
|
||||
if (input.val() === "") {
|
||||
if (isMobileView()) {
|
||||
hints.removeClass("unloaded");
|
||||
} else {
|
||||
resultSwitch.off();
|
||||
}
|
||||
|
||||
} else {
|
||||
resultSwitch.on();
|
||||
if (isMobileView()) {
|
||||
hints.addClass("unloaded");
|
||||
}
|
||||
function isMobileView() {
|
||||
return btnCancel.hasClass("loaded");
|
||||
}
|
||||
});
|
||||
|
||||
btnSearchTrigger.click(function () {
|
||||
mobileSearchBar.on();
|
||||
resultSwitch.on();
|
||||
input.focus();
|
||||
});
|
||||
|
||||
btnCancel.click(function () {
|
||||
mobileSearchBar.off();
|
||||
resultSwitch.off();
|
||||
});
|
||||
|
||||
input.focus(function () {
|
||||
searchWrapper.addClass("input-focus");
|
||||
});
|
||||
|
||||
input.focusout(function () {
|
||||
searchWrapper.removeClass("input-focus");
|
||||
});
|
||||
|
||||
input.on("input", () => {
|
||||
if (input.val() === "") {
|
||||
if (isMobileView()) {
|
||||
hints.removeClass("unloaded");
|
||||
} else {
|
||||
resultSwitch.off();
|
||||
}
|
||||
|
||||
} else {
|
||||
resultSwitch.on();
|
||||
if (isMobileView()) {
|
||||
hints.addClass("unloaded");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -2,29 +2,27 @@
|
||||
* Expand or close the sidebar in mobile screens.
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
$(function () {
|
||||
const sidebarUtil = (function () {
|
||||
const ATTR_DISPLAY = "sidebar-display";
|
||||
let isExpanded = false;
|
||||
const body = $("body");
|
||||
|
||||
const sidebarUtil = (function () {
|
||||
const ATTR_DISPLAY = "sidebar-display";
|
||||
let isExpanded = false;
|
||||
const body = $("body");
|
||||
return {
|
||||
toggle() {
|
||||
if (isExpanded === false) {
|
||||
body.attr(ATTR_DISPLAY, "");
|
||||
} else {
|
||||
body.removeAttr(ATTR_DISPLAY);
|
||||
}
|
||||
|
||||
return {
|
||||
toggle() {
|
||||
if (isExpanded === false) {
|
||||
body.attr(ATTR_DISPLAY, "");
|
||||
} else {
|
||||
body.removeAttr(ATTR_DISPLAY);
|
||||
}
|
||||
isExpanded = !isExpanded;
|
||||
}
|
||||
};
|
||||
|
||||
isExpanded = !isExpanded;
|
||||
}
|
||||
};
|
||||
}());
|
||||
|
||||
}());
|
||||
|
||||
$("#sidebar-trigger").click(sidebarUtil.toggle);
|
||||
|
||||
$("#mask").click(sidebarUtil.toggle);
|
||||
$("#sidebar-trigger").click(sidebarUtil.toggle);
|
||||
|
||||
$("#mask").click(sidebarUtil.toggle);
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* Initial Bootstrap Tooltip.
|
||||
*/
|
||||
*/
|
||||
$(function () {
|
||||
$("[data-toggle=\"tooltip\"]").tooltip();
|
||||
$("[data-toggle=\"tooltip\"]").tooltip();
|
||||
});
|
||||
|
||||
@@ -1,90 +1,89 @@
|
||||
/*
|
||||
/**
|
||||
* Hide Header on scroll down
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
const $searchInput = $("#search-input");
|
||||
const delta = ScrollHelper.getTopbarHeight();
|
||||
$(function () {
|
||||
const $searchInput = $("#search-input");
|
||||
const delta = ScrollHelper.getTopbarHeight();
|
||||
|
||||
let didScroll;
|
||||
let lastScrollTop = 0;
|
||||
let didScroll;
|
||||
let lastScrollTop = 0;
|
||||
|
||||
function hasScrolled() {
|
||||
let st = $(this).scrollTop();
|
||||
function hasScrolled() {
|
||||
let st = $(this).scrollTop();
|
||||
|
||||
/* Make sure they scroll more than delta */
|
||||
if (Math.abs(lastScrollTop - st) <= delta) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (st > lastScrollTop ) { // Scroll Down
|
||||
ScrollHelper.hideTopbar();
|
||||
|
||||
if ($searchInput.is(":focus")) {
|
||||
$searchInput.blur(); /* remove focus */
|
||||
}
|
||||
|
||||
} else { // Scroll up
|
||||
// has not yet scrolled to the bottom of the screen, that is, there is still space for scrolling
|
||||
if (st + $(window).height() < $(document).height()) {
|
||||
|
||||
if (ScrollHelper.hasScrollUpTask()) {
|
||||
return;
|
||||
/* Make sure they scroll more than delta */
|
||||
if (Math.abs(lastScrollTop - st) <= delta) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (ScrollHelper.topbarLocked()) { // avoid redundant scroll up event from smooth scrolling
|
||||
ScrollHelper.unlockTopbar();
|
||||
} else {
|
||||
if (ScrollHelper.orientationLocked()) { // avoid device auto scroll up on orientation change
|
||||
ScrollHelper.unLockOrientation();
|
||||
} else {
|
||||
ScrollHelper.showTopbar();
|
||||
}
|
||||
if (st > lastScrollTop) { // Scroll Down
|
||||
ScrollHelper.hideTopbar();
|
||||
|
||||
if ($searchInput.is(":focus")) {
|
||||
$searchInput.blur(); /* remove focus */
|
||||
}
|
||||
|
||||
} else { // Scroll up
|
||||
// has not yet scrolled to the bottom of the screen, that is, there is still space for scrolling
|
||||
if (st + $(window).height() < $(document).height()) {
|
||||
|
||||
if (ScrollHelper.hasScrollUpTask()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (ScrollHelper.topbarLocked()) { // avoid redundant scroll up event from smooth scrolling
|
||||
ScrollHelper.unlockTopbar();
|
||||
} else {
|
||||
if (ScrollHelper.orientationLocked()) { // avoid device auto scroll up on orientation change
|
||||
ScrollHelper.unLockOrientation();
|
||||
} else {
|
||||
ScrollHelper.showTopbar();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
lastScrollTop = st;
|
||||
|
||||
} // hasScrolled()
|
||||
|
||||
function handleLandscape() {
|
||||
if ($(window).scrollTop() === 0) {
|
||||
return;
|
||||
}
|
||||
ScrollHelper.lockOrientation();
|
||||
ScrollHelper.hideTopbar();
|
||||
}
|
||||
|
||||
lastScrollTop = st;
|
||||
if (screen.orientation) {
|
||||
screen.orientation.onchange = () => {
|
||||
const type = screen.orientation.type;
|
||||
if (type === "landscape-primary" || type === "landscape-secondary") {
|
||||
handleLandscape();
|
||||
}
|
||||
};
|
||||
|
||||
} // hasScrolled()
|
||||
|
||||
function handleLandscape() {
|
||||
if ($(window).scrollTop() === 0) {
|
||||
return;
|
||||
} else {
|
||||
// for the browsers that not support `window.screen.orientation` API
|
||||
$(window).on("orientationchange", () => {
|
||||
if ($(window).width() < $(window).height()) { // before rotating, it is still in portrait mode.
|
||||
handleLandscape();
|
||||
}
|
||||
});
|
||||
}
|
||||
ScrollHelper.lockOrientation();
|
||||
ScrollHelper.hideTopbar();
|
||||
}
|
||||
|
||||
if (screen.orientation) {
|
||||
screen.orientation.onchange = () => {
|
||||
const type = screen.orientation.type;
|
||||
if (type === "landscape-primary" || type === "landscape-secondary") {
|
||||
handleLandscape();
|
||||
}
|
||||
};
|
||||
|
||||
} else {
|
||||
// for the browsers that not support `window.screen.orientation` API
|
||||
$(window).on("orientationchange",() => {
|
||||
if ($(window).width() < $(window).height()) { // before rotating, it is still in portrait mode.
|
||||
handleLandscape();
|
||||
}
|
||||
$(window).scroll(() => {
|
||||
if (didScroll) {
|
||||
return;
|
||||
}
|
||||
didScroll = true;
|
||||
});
|
||||
}
|
||||
|
||||
$(window).scroll(() => {
|
||||
if (didScroll) {
|
||||
return;
|
||||
}
|
||||
didScroll = true;
|
||||
});
|
||||
|
||||
setInterval(() => {
|
||||
if (didScroll) {
|
||||
hasScrolled();
|
||||
didScroll = false;
|
||||
}
|
||||
}, 250);
|
||||
|
||||
setInterval(() => {
|
||||
if (didScroll) {
|
||||
hasScrolled();
|
||||
didScroll = false;
|
||||
}
|
||||
}, 250);
|
||||
});
|
||||
|
||||
@@ -1,67 +1,67 @@
|
||||
/*
|
||||
/**
|
||||
* Top bar title auto change while scrolling up/down in mobile screens.
|
||||
*/
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
const titleSelector = "div.post>h1:first-of-type";
|
||||
const $pageTitle = $(titleSelector);
|
||||
const $topbarTitle = $("#topbar-title");
|
||||
$(function () {
|
||||
const titleSelector = "div.post>h1:first-of-type";
|
||||
const $pageTitle = $(titleSelector);
|
||||
const $topbarTitle = $("#topbar-title");
|
||||
|
||||
if ($pageTitle.length === 0 /* on Home page */
|
||||
|| $pageTitle.hasClass("dynamic-title")
|
||||
|| $topbarTitle.is(":hidden")) {/* not in mobile views */
|
||||
return;
|
||||
}
|
||||
|
||||
const defaultTitleText = $topbarTitle.text().trim();
|
||||
let pageTitleText = $pageTitle.text().trim();
|
||||
let hasScrolled = false;
|
||||
let lastScrollTop = 0;
|
||||
|
||||
if ($("#page-category").length || $("#page-tag").length) {
|
||||
/* The title in Category or Tag page will be "<title> <count_of_posts>" */
|
||||
if (/\s/.test(pageTitleText)) {
|
||||
pageTitleText = pageTitleText.replace(/[0-9]/g, "").trim();
|
||||
}
|
||||
}
|
||||
|
||||
// When the page is scrolled down and then refreshed, the topbar title needs to be initialized
|
||||
if ($pageTitle.offset().top < $(window).scrollTop()) {
|
||||
$topbarTitle.text(pageTitleText);
|
||||
}
|
||||
|
||||
let options = {
|
||||
rootMargin: '-48px 0px 0px 0px', // 48px equals to the topbar height (3rem)
|
||||
threshold: [0, 1]
|
||||
};
|
||||
|
||||
let observer = new IntersectionObserver((entries) => {
|
||||
if (!hasScrolled) {
|
||||
hasScrolled = true;
|
||||
return;
|
||||
if ($pageTitle.length === 0 /* on Home page */
|
||||
|| $pageTitle.hasClass("dynamic-title")
|
||||
|| $topbarTitle.is(":hidden")) {/* not in mobile views */
|
||||
return;
|
||||
}
|
||||
|
||||
let curScrollTop = $(window).scrollTop();
|
||||
let isScrollDown = lastScrollTop < curScrollTop;
|
||||
lastScrollTop = curScrollTop;
|
||||
let heading = entries[0];
|
||||
const defaultTitleText = $topbarTitle.text().trim();
|
||||
let pageTitleText = $pageTitle.text().trim();
|
||||
let hasScrolled = false;
|
||||
let lastScrollTop = 0;
|
||||
|
||||
if (isScrollDown) {
|
||||
if (heading.intersectionRatio === 0) {
|
||||
if ($("#page-category").length || $("#page-tag").length) {
|
||||
/* The title in Category or Tag page will be "<title> <count_of_posts>" */
|
||||
if (/\s/.test(pageTitleText)) {
|
||||
pageTitleText = pageTitleText.replace(/[0-9]/g, "").trim();
|
||||
}
|
||||
}
|
||||
|
||||
// When the page is scrolled down and then refreshed, the topbar title needs to be initialized
|
||||
if ($pageTitle.offset().top < $(window).scrollTop()) {
|
||||
$topbarTitle.text(pageTitleText);
|
||||
}
|
||||
} else {
|
||||
if (heading.intersectionRatio === 1) {
|
||||
$topbarTitle.text(defaultTitleText);
|
||||
}
|
||||
}
|
||||
}, options);
|
||||
|
||||
observer.observe(document.querySelector(titleSelector));
|
||||
let options = {
|
||||
rootMargin: '-48px 0px 0px 0px', // 48px equals to the topbar height (3rem)
|
||||
threshold: [0, 1]
|
||||
};
|
||||
|
||||
/* Click title will scroll to top */
|
||||
$topbarTitle.click(function() {
|
||||
$("body,html").animate({scrollTop: 0}, 800);
|
||||
});
|
||||
let observer = new IntersectionObserver((entries) => {
|
||||
if (!hasScrolled) {
|
||||
hasScrolled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
let curScrollTop = $(window).scrollTop();
|
||||
let isScrollDown = lastScrollTop < curScrollTop;
|
||||
lastScrollTop = curScrollTop;
|
||||
let heading = entries[0];
|
||||
|
||||
if (isScrollDown) {
|
||||
if (heading.intersectionRatio === 0) {
|
||||
$topbarTitle.text(pageTitleText);
|
||||
}
|
||||
} else {
|
||||
if (heading.intersectionRatio === 1) {
|
||||
$topbarTitle.text(defaultTitleText);
|
||||
}
|
||||
}
|
||||
}, options);
|
||||
|
||||
observer.observe(document.querySelector(titleSelector));
|
||||
|
||||
/* Click title will scroll to top */
|
||||
$topbarTitle.click(function () {
|
||||
$("body,html").animate({scrollTop: 0}, 800);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user