jPanelMenu и прокрутка не работают вместе

Question

ОБНОВЛЕНИЕ - Решение

Я наконец нашел решение... и это супер просто!

просто добавьте следующее к вашему CSS:

body { overflow-x: visible; }

Похоже, конфликт возникает, если для overflow-x jPanelMenu скрыто в теле.

Я запускаю jPanelMenu и jRespond вместе (jPanelMenu активен только на меньших экранах благодаря jRespond, на больших экранах меню исправлено и не использует jPanelMenu).

Все работает нормально, но когда я пытаюсь использовать любой вид js для применения css к прокрутке страницы, он не работает, пока активен jPanelMenu.

Я хочу добавить плавающую кнопку меню, чтобы открыть jPanelMenu, как только пользователь прокрутит заголовок, который должен быть активен только тогда, когда активен jPanelMenu.

Вот один из фрагментов прокрутки, которые я использовал:

jQuery(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 200) {
        $("#scroll-trigger").addClass("show");
    } else {
        $("#scroll-trigger").removeClass("show");
    }
});

Это работает само по себе, как и ряд других способов написания этого метода прокрутки. Но когда jPanelMenu включен, этот код прокрутки становится бесполезным.

Вот еще один, который я нашел на codrops, он также работает сам по себе, но конфликтует с jPanelMenu:

var cbpAnimatedHeader = (function() {

    var docElem = document.documentElement,
        header = document.querySelector( 'header' ),
        didScroll = false,
        changeHeaderOn = 300;

    function init() {
        window.addEventListener( 'scroll', function( event ) {
            if( !didScroll ) {
                didScroll = true;
                setTimeout( scrollPage, 250 );
            }
        }, false );
    }

    function scrollPage() {
        var sy = scrollY();
        if ( sy >= changeHeaderOn ) {
            classie.add( header, 'bodhi-header-shrink' );
        }
        else {
            classie.remove( header, 'bodhi-header-shrink' );
        }
        didScroll = false;
    }

    function scrollY() {
        return window.pageYOffset || docElem.scrollTop;
    }

    init();

})();

Я не смог ничего найти в коде лично и искал в Интернете похожие и пробовал оооочень много разных способов реализации, это не смешно. Любая помощь будет принята с благодарностью. Заранее спасибо!

Answer 1

Я наконец нашел решение... и это супер просто!

просто добавьте следующее к вашему CSS:

body { overflow-x: visible; }

Похоже, конфликт возникает, если для overflow-x jPanelMenu скрыто в теле.

Answer 2

jpanelmenu - страшный плагин, используйте sidr ( http://www.berriart.com/sidr/)