Avoid menu border flash during page navigation

Partially addresses #443
This commit is contained in:
Em Zhan 2023-06-17 21:40:39 -05:00
parent a204946d39
commit 1ef8d70ac4
2 changed files with 5 additions and 4 deletions

View File

@ -676,13 +676,14 @@ function playground_text(playground, hidden = true) {
}, { passive: true }); }, { passive: true });
})(); })();
(function controllBorder() { (function controllBorder() {
menu.classList.remove('bordered'); function updateBorder() {
document.addEventListener('scroll', function () {
if (menu.offsetTop === 0) { if (menu.offsetTop === 0) {
menu.classList.remove('bordered'); menu.classList.remove('bordered');
} else { } else {
menu.classList.add('bordered'); menu.classList.add('bordered');
} }
}, { passive: true }); }
updateBorder();
document.addEventListener('scroll', updateBorder, { passive: true });
})(); })();
})(); })();

View File

@ -115,7 +115,7 @@
<div class="page"> <div class="page">
{{> header}} {{> header}}
<div id="menu-bar-hover-placeholder"></div> <div id="menu-bar-hover-placeholder"></div>
<div id="menu-bar" class="menu-bar sticky bordered"> <div id="menu-bar" class="menu-bar sticky">
<div class="left-buttons"> <div class="left-buttons">
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar"> <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i> <i class="fa fa-bars"></i>