Question

更新 - 解决方案

我终于找到了解决方案......而且它非常简单！

只需将以下内容添加到您的css：

body { overflow-x: visible; }

当overflow-x设置为隐藏时，似乎冲突就会出现   身体由jPanelMenu。

我一起运行jPanelMenu和jRespond （由于jRespond，jPanelMenu只在较小的屏幕上激活，在较大的屏幕上，菜单是固定的，不使用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; }

当j -nelMenu将overflow-x设置为隐藏在身体上时，似乎会发生冲突。

Answer 2

jpanelmenu是一个可怕的插件，使用sidr（http://www.berriart.com/sidr/）

jPanelMenu和滚动不一起工作

2 个答案: