javascript - jPanelMenu 和滚动不能一起工作

Question

UPDATE - The Solution

I finally found the solution... and it is super simple!

just add the following to your css:

body { overflow-x: visible; }

It seems the conflict arises when overflow-x is set to hidden on the body by jPanelMenu.

我同时运行 jPanelMenu 和 jRespond (由于 jRespond，jPanelMenu 仅在较小的屏幕上处于事件状态，在较大的屏幕上菜单是固定的并且不使用 jPanelMenu)。

一切正常，但是当我尝试使用任何类型的 js 在页面滚动上应用 css 时，它在 jPanelMenu 处于事件状态时不起作用。

我想添加一个 float 菜单按钮，以便在用户滚动过标题时打开 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

我终于找到了解决方案...而且 super 简单!

只需将以下内容添加到您的 CSS 中:

body { overflow-x: visible; }

似乎冲突是在jPanelMenu 将overflow-x 设置为隐藏在body 上时出现的。