mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-07 01:54:23 +00:00
fix: disable body scrolling when navbar is collapsed on mobile
This commit is contained in:
Mark Dumay
@@ -4,6 +4,8 @@ const togglers = document.querySelectorAll('.main-nav-toggler')
|
|||||||
const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
|
const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
|
||||||
const colorsBG = ['body', 'secondary', 'tertiary']
|
const colorsBG = ['body', 'secondary', 'tertiary']
|
||||||
|
|
||||||
|
let scrollPosition = 0
|
||||||
|
|
||||||
function sleep(ms) {
|
function sleep(ms) {
|
||||||
return new Promise(resolve => setTimeout(resolve, ms))
|
return new Promise(resolve => setTimeout(resolve, ms))
|
||||||
}
|
}
|
||||||
@@ -175,6 +177,20 @@ if (navbar !== null && togglers !== null) {
|
|||||||
document.addEventListener('resize', () => fixed && updateNavbar())
|
document.addEventListener('resize', () => fixed && updateNavbar())
|
||||||
document.addEventListener('scroll', () => 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
|
// observe state changes to the site's color mode
|
||||||
const html = document.querySelector('html')
|
const html = document.querySelector('html')
|
||||||
const config = {
|
const config = {
|
||||||
|
|||||||
@@ -435,3 +435,9 @@
|
|||||||
ul.inline-menu {
|
ul.inline-menu {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.navbar-open {
|
||||||
|
overflow: hidden;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|||||||
@@ -248,6 +248,9 @@
|
|||||||
"fa-activity",
|
"fa-activity",
|
||||||
"fa-address-card",
|
"fa-address-card",
|
||||||
"fa-angle-left",
|
"fa-angle-left",
|
||||||
|
"fa-angle-right",
|
||||||
|
"fa-angles-left",
|
||||||
|
"fa-angles-right",
|
||||||
"fa-arrow-left",
|
"fa-arrow-left",
|
||||||
"fa-arrow-right",
|
"fa-arrow-right",
|
||||||
"fa-bootstrap",
|
"fa-bootstrap",
|
||||||
@@ -678,11 +681,16 @@
|
|||||||
"docs",
|
"docs",
|
||||||
"documentation",
|
"documentation",
|
||||||
"dropdown-nav-0",
|
"dropdown-nav-0",
|
||||||
"dropdown-panel-07d1354ac1f376fa71ba3c17bda5d1e8",
|
"dropdown-panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e",
|
||||||
"dropdown-panel-9fbb4d11f9789e8d1ac8101f27e50d43",
|
"dropdown-panel-256968d78244b40725f5d484ea340a5f",
|
||||||
"dropdown-panel-b612d68b0712cd7dad9655013798aaeb",
|
"dropdown-panel-29ba03d101604c5caa618293938833b1",
|
||||||
"dropdown-panel-be9ac158248a563331ee993b38022af7",
|
"dropdown-panel-30c508a91fbd512d0bee6f976efc028c",
|
||||||
"dropdown-panel-deed5194e569ce126edf85b9ece8aec6",
|
"dropdown-panel-47c670e7ebc8dd6e57f5d70dde479a8b",
|
||||||
|
"dropdown-panel-4c945acd0c9326daa6f433a64262c7a0",
|
||||||
|
"dropdown-panel-552e42166b1b143d516aeccc1fbc7d32",
|
||||||
|
"dropdown-panel-bf5b105df93a1545b2fc424e3ab1c654",
|
||||||
|
"dropdown-panel-e5aba6d799885a8fd4208fade274e3a7",
|
||||||
|
"dropdown-panel-fd6d8a3429e95196931cd8c08072abf3",
|
||||||
"eerste-artikel",
|
"eerste-artikel",
|
||||||
"elements-type",
|
"elements-type",
|
||||||
"entity-relationship-diagram",
|
"entity-relationship-diagram",
|
||||||
@@ -703,16 +711,24 @@
|
|||||||
"fab-whatsapp",
|
"fab-whatsapp",
|
||||||
"fab-x-twitter",
|
"fab-x-twitter",
|
||||||
"faq",
|
"faq",
|
||||||
"faq-3ab3d1bfbd7996fb6dc7159e57eff8af",
|
"faq-726ff0b8b5ec9328cfef51994d523ad1",
|
||||||
"faq-3ab3d1bfbd7996fb6dc7159e57eff8af-heading-faq-3ab3d1bfbd7996fb6dc7159e57eff8af",
|
"faq-726ff0b8b5ec9328cfef51994d523ad1-heading-faq-726ff0b8b5ec9328cfef51994d523ad1",
|
||||||
"faq-3ab3d1bfbd7996fb6dc7159e57eff8af-item-0",
|
"faq-726ff0b8b5ec9328cfef51994d523ad1-item-0",
|
||||||
"faq-3ab3d1bfbd7996fb6dc7159e57eff8af-item-1",
|
"faq-726ff0b8b5ec9328cfef51994d523ad1-item-1",
|
||||||
"faq-3ab3d1bfbd7996fb6dc7159e57eff8af-item-2",
|
"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-1",
|
||||||
"fas-2",
|
"fas-2",
|
||||||
"fas-3",
|
"fas-3",
|
||||||
"fas-address-card",
|
"fas-address-card",
|
||||||
"fas-angle-left",
|
"fas-angle-left",
|
||||||
|
"fas-angle-right",
|
||||||
|
"fas-angles-left",
|
||||||
|
"fas-angles-right",
|
||||||
"fas-arrow-left",
|
"fas-arrow-left",
|
||||||
"fas-arrow-right",
|
"fas-arrow-right",
|
||||||
"fas-chevron-right",
|
"fas-chevron-right",
|
||||||
@@ -803,11 +819,16 @@
|
|||||||
"nav-0-btn-1",
|
"nav-0-btn-1",
|
||||||
"nav-0-btn-2",
|
"nav-0-btn-2",
|
||||||
"nav-nav-0",
|
"nav-nav-0",
|
||||||
"nav-panel-07d1354ac1f376fa71ba3c17bda5d1e8",
|
"nav-panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e",
|
||||||
"nav-panel-9fbb4d11f9789e8d1ac8101f27e50d43",
|
"nav-panel-256968d78244b40725f5d484ea340a5f",
|
||||||
"nav-panel-b612d68b0712cd7dad9655013798aaeb",
|
"nav-panel-29ba03d101604c5caa618293938833b1",
|
||||||
"nav-panel-be9ac158248a563331ee993b38022af7",
|
"nav-panel-30c508a91fbd512d0bee6f976efc028c",
|
||||||
"nav-panel-deed5194e569ce126edf85b9ece8aec6",
|
"nav-panel-47c670e7ebc8dd6e57f5d70dde479a8b",
|
||||||
|
"nav-panel-4c945acd0c9326daa6f433a64262c7a0",
|
||||||
|
"nav-panel-552e42166b1b143d516aeccc1fbc7d32",
|
||||||
|
"nav-panel-bf5b105df93a1545b2fc424e3ab1c654",
|
||||||
|
"nav-panel-e5aba6d799885a8fd4208fade274e3a7",
|
||||||
|
"nav-panel-fd6d8a3429e95196931cd8c08072abf3",
|
||||||
"navbar",
|
"navbar",
|
||||||
"navbar-0-collapse",
|
"navbar-0-collapse",
|
||||||
"navbar-mode",
|
"navbar-mode",
|
||||||
@@ -817,36 +838,66 @@
|
|||||||
"notification",
|
"notification",
|
||||||
"over-mij",
|
"over-mij",
|
||||||
"overview",
|
"overview",
|
||||||
"panel-07d1354ac1f376fa71ba3c17bda5d1e8-0",
|
"panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-0",
|
||||||
"panel-07d1354ac1f376fa71ba3c17bda5d1e8-1",
|
"panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-1",
|
||||||
"panel-07d1354ac1f376fa71ba3c17bda5d1e8-2",
|
"panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-2",
|
||||||
"panel-07d1354ac1f376fa71ba3c17bda5d1e8-btn-0",
|
"panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-btn-0",
|
||||||
"panel-07d1354ac1f376fa71ba3c17bda5d1e8-btn-1",
|
"panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-btn-1",
|
||||||
"panel-07d1354ac1f376fa71ba3c17bda5d1e8-btn-2",
|
"panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-btn-2",
|
||||||
"panel-9fbb4d11f9789e8d1ac8101f27e50d43-0",
|
"panel-256968d78244b40725f5d484ea340a5f-0",
|
||||||
"panel-9fbb4d11f9789e8d1ac8101f27e50d43-1",
|
"panel-256968d78244b40725f5d484ea340a5f-1",
|
||||||
"panel-9fbb4d11f9789e8d1ac8101f27e50d43-2",
|
"panel-256968d78244b40725f5d484ea340a5f-2",
|
||||||
"panel-9fbb4d11f9789e8d1ac8101f27e50d43-btn-0",
|
"panel-256968d78244b40725f5d484ea340a5f-btn-0",
|
||||||
"panel-9fbb4d11f9789e8d1ac8101f27e50d43-btn-1",
|
"panel-256968d78244b40725f5d484ea340a5f-btn-1",
|
||||||
"panel-9fbb4d11f9789e8d1ac8101f27e50d43-btn-2",
|
"panel-256968d78244b40725f5d484ea340a5f-btn-2",
|
||||||
"panel-b612d68b0712cd7dad9655013798aaeb-0",
|
"panel-29ba03d101604c5caa618293938833b1-0",
|
||||||
"panel-b612d68b0712cd7dad9655013798aaeb-1",
|
"panel-29ba03d101604c5caa618293938833b1-1",
|
||||||
"panel-b612d68b0712cd7dad9655013798aaeb-2",
|
"panel-29ba03d101604c5caa618293938833b1-2",
|
||||||
"panel-b612d68b0712cd7dad9655013798aaeb-btn-0",
|
"panel-29ba03d101604c5caa618293938833b1-btn-0",
|
||||||
"panel-b612d68b0712cd7dad9655013798aaeb-btn-1",
|
"panel-29ba03d101604c5caa618293938833b1-btn-1",
|
||||||
"panel-b612d68b0712cd7dad9655013798aaeb-btn-2",
|
"panel-29ba03d101604c5caa618293938833b1-btn-2",
|
||||||
"panel-be9ac158248a563331ee993b38022af7-0",
|
"panel-30c508a91fbd512d0bee6f976efc028c-0",
|
||||||
"panel-be9ac158248a563331ee993b38022af7-1",
|
"panel-30c508a91fbd512d0bee6f976efc028c-1",
|
||||||
"panel-be9ac158248a563331ee993b38022af7-2",
|
"panel-30c508a91fbd512d0bee6f976efc028c-2",
|
||||||
"panel-be9ac158248a563331ee993b38022af7-btn-0",
|
"panel-30c508a91fbd512d0bee6f976efc028c-btn-0",
|
||||||
"panel-be9ac158248a563331ee993b38022af7-btn-1",
|
"panel-30c508a91fbd512d0bee6f976efc028c-btn-1",
|
||||||
"panel-be9ac158248a563331ee993b38022af7-btn-2",
|
"panel-30c508a91fbd512d0bee6f976efc028c-btn-2",
|
||||||
"panel-deed5194e569ce126edf85b9ece8aec6-0",
|
"panel-47c670e7ebc8dd6e57f5d70dde479a8b-0",
|
||||||
"panel-deed5194e569ce126edf85b9ece8aec6-1",
|
"panel-47c670e7ebc8dd6e57f5d70dde479a8b-1",
|
||||||
"panel-deed5194e569ce126edf85b9ece8aec6-2",
|
"panel-47c670e7ebc8dd6e57f5d70dde479a8b-2",
|
||||||
"panel-deed5194e569ce126edf85b9ece8aec6-btn-0",
|
"panel-47c670e7ebc8dd6e57f5d70dde479a8b-btn-0",
|
||||||
"panel-deed5194e569ce126edf85b9ece8aec6-btn-1",
|
"panel-47c670e7ebc8dd6e57f5d70dde479a8b-btn-1",
|
||||||
"panel-deed5194e569ce126edf85b9ece8aec6-btn-2",
|
"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",
|
"panels",
|
||||||
"persona",
|
"persona",
|
||||||
"pie-chart",
|
"pie-chart",
|
||||||
|
|||||||
Reference in New Issue
Block a user