diff --git a/framework/core/js/forum/src/utils/affixSidebar.js b/framework/core/js/forum/src/utils/affixSidebar.js index 0acacbb5f..6d062d7b0 100644 --- a/framework/core/js/forum/src/utils/affixSidebar.js +++ b/framework/core/js/forum/src/utils/affixSidebar.js @@ -4,22 +4,38 @@ * * @param {DOMElement} element * @param {Boolean} isInitialized + * @param {Object} context */ -export default function affixSidebar(element, isInitialized) { +export default function affixSidebar(element, isInitialized, context) { if (isInitialized) return; - const $sidebar = $(element); - const $header = $('#header'); - const $footer = $('#footer'); + const onresize = () => { + const $sidebar = $(element); + const $header = $('#header'); + const $footer = $('#footer'); + const $affixElement = $sidebar.find('> ul'); - // Don't affix the sidebar if it is taller than the viewport (otherwise - // there would be no way to scroll through its content). - if ($sidebar.outerHeight(true) > $(window).height() - $header.outerHeight(true)) return; + $(window).off('.affix'); + $affixElement + .removeClass('affix affix-top affix-bottom') + .removeData('bs.affix'); - $sidebar.find('> ul').affix({ - offset: { - top: () => $sidebar.offset().top - $header.outerHeight(true) - parseInt($sidebar.css('margin-top'), 10), - bottom: () => this.bottom = $footer.outerHeight(true) - } - }); + // Don't affix the sidebar if it is taller than the viewport (otherwise + // there would be no way to scroll through its content). + if ($sidebar.outerHeight(true) > $(window).height() - $header.outerHeight(true)) return; + + $affixElement.affix({ + offset: { + top: () => $sidebar.offset().top - $header.outerHeight(true) - parseInt($sidebar.css('margin-top'), 10), + bottom: () => this.bottom = $footer.outerHeight(true) + } + }); + }; + + // Register the affix plugin to execute on every window resize (and trigger) + $(window).on('resize', onresize).resize(); + + context.onunload = () => { + $(window).off('resize', onresize); + } }