marcj / css-element-queries

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
http://marcj.github.io/css-element-queries/
MIT License
4.27k stars 487 forks source link

Hot to use stickySidebar.destroy(); #279

Closed wwdes closed 4 years ago

wwdes commented 4 years ago

I want to use this method but I cannot wrap my head around how to implement it to terminate a defined sidebar.

I know you have a minWidth option but this following code is for testing purposes only.

function WidthChange(mq) {
    if (mq.matches) {

        var stickySidebar = new StickySidebar('#menu-desktop', {
        containerSelector: '#content-wrap-inner',
        innerWrapperSelector: '.menu-desktop-wrap',
        });

    } else {

        var stickySidebar = new StickySidebar('#menu-desktop')
        stickySidebar.destroy();

    }

}

if (matchMedia) {
    const mq = window.matchMedia("(min-width: 800px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

So the sidebar works perfectly if the window is ever at or above 800px wide, but once it starts working it never gets terminated when we go below 800px. It seems that stickySidebar.destroy(); is not working. Why could this be?

marcj commented 4 years ago

This has nothing to do with that library.