From c4fd974e99cfdcf9dfea71609aa60a9e0e08258b Mon Sep 17 00:00:00 2001 From: Mark Dumay <61946753+markdumay@users.noreply.github.com> Date: Sun, 5 Oct 2025 08:47:40 +0200 Subject: [PATCH] fix: disable body scrolling when navbar is collapsed on mobile --- assets/js/navbar.js | 16 ++++ assets/scss/components/_navbar.scss | 6 ++ exampleSite/hugo_stats.json | 141 +++++++++++++++++++--------- 3 files changed, 118 insertions(+), 45 deletions(-) diff --git a/assets/js/navbar.js b/assets/js/navbar.js index 517e2496..e9797b57 100644 --- a/assets/js/navbar.js +++ b/assets/js/navbar.js @@ -4,6 +4,8 @@ const togglers = document.querySelectorAll('.main-nav-toggler') const modeSelectors = document.querySelectorAll('.switch-mode-collapsed') const colorsBG = ['body', 'secondary', 'tertiary'] +let scrollPosition = 0 + function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)) } @@ -175,6 +177,20 @@ if (navbar !== null && togglers !== null) { document.addEventListener('resize', () => fixed && updateNavbar()) document.addEventListener('scroll', () => fixed && updateNavbar()) + // hook up collapse events + document.querySelectorAll('.navbar-collapse').forEach((collapse) => { + collapse.addEventListener('show.bs.collapse', function () { + scrollPosition = window.pageYOffset + document.body.style.top = `-${scrollPosition}px` + document.body.classList.add('navbar-open') + }) + collapse.addEventListener('hide.bs.collapse', function () { + document.body.classList.remove('navbar-open') + document.body.style.top = '' + window.scrollTo({ top: scrollPosition, behavior: 'instant' }) + }) + }) + // observe state changes to the site's color mode const html = document.querySelector('html') const config = { diff --git a/assets/scss/components/_navbar.scss b/assets/scss/components/_navbar.scss index ad667b6d..de46f5ec 100644 --- a/assets/scss/components/_navbar.scss +++ b/assets/scss/components/_navbar.scss @@ -435,3 +435,9 @@ ul.inline-menu { padding: 0; } + +body.navbar-open { + overflow: hidden; + position: fixed; + width: 100%; +} diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 30899734..c9da2e87 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -248,6 +248,9 @@ "fa-activity", "fa-address-card", "fa-angle-left", + "fa-angle-right", + "fa-angles-left", + "fa-angles-right", "fa-arrow-left", "fa-arrow-right", "fa-bootstrap", @@ -678,11 +681,16 @@ "docs", "documentation", "dropdown-nav-0", - "dropdown-panel-07d1354ac1f376fa71ba3c17bda5d1e8", - "dropdown-panel-9fbb4d11f9789e8d1ac8101f27e50d43", - "dropdown-panel-b612d68b0712cd7dad9655013798aaeb", - "dropdown-panel-be9ac158248a563331ee993b38022af7", - "dropdown-panel-deed5194e569ce126edf85b9ece8aec6", + "dropdown-panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e", + "dropdown-panel-256968d78244b40725f5d484ea340a5f", + "dropdown-panel-29ba03d101604c5caa618293938833b1", + "dropdown-panel-30c508a91fbd512d0bee6f976efc028c", + "dropdown-panel-47c670e7ebc8dd6e57f5d70dde479a8b", + "dropdown-panel-4c945acd0c9326daa6f433a64262c7a0", + "dropdown-panel-552e42166b1b143d516aeccc1fbc7d32", + "dropdown-panel-bf5b105df93a1545b2fc424e3ab1c654", + "dropdown-panel-e5aba6d799885a8fd4208fade274e3a7", + "dropdown-panel-fd6d8a3429e95196931cd8c08072abf3", "eerste-artikel", "elements-type", "entity-relationship-diagram", @@ -703,16 +711,24 @@ "fab-whatsapp", "fab-x-twitter", "faq", - "faq-3ab3d1bfbd7996fb6dc7159e57eff8af", - "faq-3ab3d1bfbd7996fb6dc7159e57eff8af-heading-faq-3ab3d1bfbd7996fb6dc7159e57eff8af", - "faq-3ab3d1bfbd7996fb6dc7159e57eff8af-item-0", - "faq-3ab3d1bfbd7996fb6dc7159e57eff8af-item-1", - "faq-3ab3d1bfbd7996fb6dc7159e57eff8af-item-2", + "faq-726ff0b8b5ec9328cfef51994d523ad1", + "faq-726ff0b8b5ec9328cfef51994d523ad1-heading-faq-726ff0b8b5ec9328cfef51994d523ad1", + "faq-726ff0b8b5ec9328cfef51994d523ad1-item-0", + "faq-726ff0b8b5ec9328cfef51994d523ad1-item-1", + "faq-726ff0b8b5ec9328cfef51994d523ad1-item-2", + "faq-c610e94909d8dd90e16cbcbc4cc3fe84", + "faq-c610e94909d8dd90e16cbcbc4cc3fe84-heading-faq-c610e94909d8dd90e16cbcbc4cc3fe84", + "faq-c610e94909d8dd90e16cbcbc4cc3fe84-item-0", + "faq-c610e94909d8dd90e16cbcbc4cc3fe84-item-1", + "faq-c610e94909d8dd90e16cbcbc4cc3fe84-item-2", "fas-1", "fas-2", "fas-3", "fas-address-card", "fas-angle-left", + "fas-angle-right", + "fas-angles-left", + "fas-angles-right", "fas-arrow-left", "fas-arrow-right", "fas-chevron-right", @@ -803,11 +819,16 @@ "nav-0-btn-1", "nav-0-btn-2", "nav-nav-0", - "nav-panel-07d1354ac1f376fa71ba3c17bda5d1e8", - "nav-panel-9fbb4d11f9789e8d1ac8101f27e50d43", - "nav-panel-b612d68b0712cd7dad9655013798aaeb", - "nav-panel-be9ac158248a563331ee993b38022af7", - "nav-panel-deed5194e569ce126edf85b9ece8aec6", + "nav-panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e", + "nav-panel-256968d78244b40725f5d484ea340a5f", + "nav-panel-29ba03d101604c5caa618293938833b1", + "nav-panel-30c508a91fbd512d0bee6f976efc028c", + "nav-panel-47c670e7ebc8dd6e57f5d70dde479a8b", + "nav-panel-4c945acd0c9326daa6f433a64262c7a0", + "nav-panel-552e42166b1b143d516aeccc1fbc7d32", + "nav-panel-bf5b105df93a1545b2fc424e3ab1c654", + "nav-panel-e5aba6d799885a8fd4208fade274e3a7", + "nav-panel-fd6d8a3429e95196931cd8c08072abf3", "navbar", "navbar-0-collapse", "navbar-mode", @@ -817,36 +838,66 @@ "notification", "over-mij", "overview", - "panel-07d1354ac1f376fa71ba3c17bda5d1e8-0", - "panel-07d1354ac1f376fa71ba3c17bda5d1e8-1", - "panel-07d1354ac1f376fa71ba3c17bda5d1e8-2", - "panel-07d1354ac1f376fa71ba3c17bda5d1e8-btn-0", - "panel-07d1354ac1f376fa71ba3c17bda5d1e8-btn-1", - "panel-07d1354ac1f376fa71ba3c17bda5d1e8-btn-2", - "panel-9fbb4d11f9789e8d1ac8101f27e50d43-0", - "panel-9fbb4d11f9789e8d1ac8101f27e50d43-1", - "panel-9fbb4d11f9789e8d1ac8101f27e50d43-2", - "panel-9fbb4d11f9789e8d1ac8101f27e50d43-btn-0", - "panel-9fbb4d11f9789e8d1ac8101f27e50d43-btn-1", - "panel-9fbb4d11f9789e8d1ac8101f27e50d43-btn-2", - "panel-b612d68b0712cd7dad9655013798aaeb-0", - "panel-b612d68b0712cd7dad9655013798aaeb-1", - "panel-b612d68b0712cd7dad9655013798aaeb-2", - "panel-b612d68b0712cd7dad9655013798aaeb-btn-0", - "panel-b612d68b0712cd7dad9655013798aaeb-btn-1", - "panel-b612d68b0712cd7dad9655013798aaeb-btn-2", - "panel-be9ac158248a563331ee993b38022af7-0", - "panel-be9ac158248a563331ee993b38022af7-1", - "panel-be9ac158248a563331ee993b38022af7-2", - "panel-be9ac158248a563331ee993b38022af7-btn-0", - "panel-be9ac158248a563331ee993b38022af7-btn-1", - "panel-be9ac158248a563331ee993b38022af7-btn-2", - "panel-deed5194e569ce126edf85b9ece8aec6-0", - "panel-deed5194e569ce126edf85b9ece8aec6-1", - "panel-deed5194e569ce126edf85b9ece8aec6-2", - "panel-deed5194e569ce126edf85b9ece8aec6-btn-0", - "panel-deed5194e569ce126edf85b9ece8aec6-btn-1", - "panel-deed5194e569ce126edf85b9ece8aec6-btn-2", + "panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-0", + "panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-1", + "panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-2", + "panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-btn-0", + "panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-btn-1", + "panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-btn-2", + "panel-256968d78244b40725f5d484ea340a5f-0", + "panel-256968d78244b40725f5d484ea340a5f-1", + "panel-256968d78244b40725f5d484ea340a5f-2", + "panel-256968d78244b40725f5d484ea340a5f-btn-0", + "panel-256968d78244b40725f5d484ea340a5f-btn-1", + "panel-256968d78244b40725f5d484ea340a5f-btn-2", + "panel-29ba03d101604c5caa618293938833b1-0", + "panel-29ba03d101604c5caa618293938833b1-1", + "panel-29ba03d101604c5caa618293938833b1-2", + "panel-29ba03d101604c5caa618293938833b1-btn-0", + "panel-29ba03d101604c5caa618293938833b1-btn-1", + "panel-29ba03d101604c5caa618293938833b1-btn-2", + "panel-30c508a91fbd512d0bee6f976efc028c-0", + "panel-30c508a91fbd512d0bee6f976efc028c-1", + "panel-30c508a91fbd512d0bee6f976efc028c-2", + "panel-30c508a91fbd512d0bee6f976efc028c-btn-0", + "panel-30c508a91fbd512d0bee6f976efc028c-btn-1", + "panel-30c508a91fbd512d0bee6f976efc028c-btn-2", + "panel-47c670e7ebc8dd6e57f5d70dde479a8b-0", + "panel-47c670e7ebc8dd6e57f5d70dde479a8b-1", + "panel-47c670e7ebc8dd6e57f5d70dde479a8b-2", + "panel-47c670e7ebc8dd6e57f5d70dde479a8b-btn-0", + "panel-47c670e7ebc8dd6e57f5d70dde479a8b-btn-1", + "panel-47c670e7ebc8dd6e57f5d70dde479a8b-btn-2", + "panel-4c945acd0c9326daa6f433a64262c7a0-0", + "panel-4c945acd0c9326daa6f433a64262c7a0-1", + "panel-4c945acd0c9326daa6f433a64262c7a0-2", + "panel-4c945acd0c9326daa6f433a64262c7a0-btn-0", + "panel-4c945acd0c9326daa6f433a64262c7a0-btn-1", + "panel-4c945acd0c9326daa6f433a64262c7a0-btn-2", + "panel-552e42166b1b143d516aeccc1fbc7d32-0", + "panel-552e42166b1b143d516aeccc1fbc7d32-1", + "panel-552e42166b1b143d516aeccc1fbc7d32-2", + "panel-552e42166b1b143d516aeccc1fbc7d32-btn-0", + "panel-552e42166b1b143d516aeccc1fbc7d32-btn-1", + "panel-552e42166b1b143d516aeccc1fbc7d32-btn-2", + "panel-bf5b105df93a1545b2fc424e3ab1c654-0", + "panel-bf5b105df93a1545b2fc424e3ab1c654-1", + "panel-bf5b105df93a1545b2fc424e3ab1c654-2", + "panel-bf5b105df93a1545b2fc424e3ab1c654-btn-0", + "panel-bf5b105df93a1545b2fc424e3ab1c654-btn-1", + "panel-bf5b105df93a1545b2fc424e3ab1c654-btn-2", + "panel-e5aba6d799885a8fd4208fade274e3a7-0", + "panel-e5aba6d799885a8fd4208fade274e3a7-1", + "panel-e5aba6d799885a8fd4208fade274e3a7-2", + "panel-e5aba6d799885a8fd4208fade274e3a7-btn-0", + "panel-e5aba6d799885a8fd4208fade274e3a7-btn-1", + "panel-e5aba6d799885a8fd4208fade274e3a7-btn-2", + "panel-fd6d8a3429e95196931cd8c08072abf3-0", + "panel-fd6d8a3429e95196931cd8c08072abf3-1", + "panel-fd6d8a3429e95196931cd8c08072abf3-2", + "panel-fd6d8a3429e95196931cd8c08072abf3-btn-0", + "panel-fd6d8a3429e95196931cd8c08072abf3-btn-1", + "panel-fd6d8a3429e95196931cd8c08072abf3-btn-2", "panels", "persona", "pie-chart",