Weird behaviour using the mmenuJS plugin and a fixed header on scrolling

Question

I have integrated the library mmenuJS on a website katholische-kirche-dinslaken.de because it had to be done quickly. Now it is the case that initially the header is not displayed when scrolling. If, on the other hand, you open the mobile menu once and close it again, the sticky header is also displayed when scrolling.

I don't see the problem here. There are no javascript errors.

Does anyone have an idea why this behavior occurs?

Here's the code

window.addEventListener('DOMContentLoaded', () => {
const headerFixedPosition = document.querySelector('.header__top').clientHeight;
window.addEventListener('scroll', () => {
    if (window.scrollY > headerFixedPosition) {
        document.querySelector('.header__top').classList.add('fixed');
        document.body.style.paddingTop = `${headerFixedPosition}px`;

        if (window.scrollY > (headerFixedPosition + 50)) {
            document.querySelector('.header__top').classList.add('fade-in')
        } else {
            document.querySelector('.header__top').classList.remove('fade-in')
        }
    } else {
        document.querySelector('.header__top').classList.remove('fixed')
        document.body.style.paddingTop = 0;
    }
});

const menu = new Mmenu("#mobilemenu", {
    offCanvas: {
        position: 'right'
    },
    slidingSubmenus: false
});
const api = menu.API;
document.querySelector( "#openmenu" )
        .addEventListener(
            "click", () => {
                api.open();
            }
        );
})

Answer 1

In case you use the "slidingSubmenus: false" option, scrolling is turned off by default. You can make scrolling turned on again by using the following option as well:

scrollBugFix: {
    fix: false
},

For more details, see the documentation here: https://mmenujs.com/docs/core/scroll-bug-fix.html