Question

我正在制作一个带有burger-btn的移动菜单，触发全宽覆盖。

这很有效，但是在叠加层后面滚动内容时会出现问题。我用了这行代码

if($('.nav-container').is(':visible')) {
  $('body').addClass("fixedPosition");
} else {
  $('body').removeClass("fixedPosition");
}

使用这一行CSS，可以清除叠加层后面的滚动。

.fixedPosition {
  overflow: hidden;
}

问题是这样 - 关闭叠加层时，此课程.fixedPosition 没有删除它应该是。

有人对此有解决方法吗？

看我的小提琴：https://jsfiddle.net/bdL76s59/1/

Answer 1

这似乎在我的小提琴中起作用

    if($('.nav-container').is(':visible'))
     {
        $('body').toggleClass("fixedPosition");
     }

});

https://jsfiddle.net/bdL76s59/2/

编辑：

在您的代码正常运行后添加$('body').toggleClass("fixedPosition");。

Answer 2

这是因为您的条件在切换事件完成之前执行。试试这个：

 menu.fadeToggle(function(){

                        if($('.nav-container').is(':visible'))
                         {
                            $('body').addClass("fixedPosition");
                         }
                         else
                         {
                            $('body').removeClass("fixedPosition");

                         }
                        });

见小提琴：

https://jsfiddle.net/bdL76s59/3/

Answer 3

fadeToggle()需要一些时间才能完成动画效果。在未完成之前display属性未从block切换到none，但您的代码会在您开始淡入淡出动画后检查菜单是否可见，因此它仍然可见。你的其他块永远不会运行要使其按预期工作，您必须将类操作代码放入fadeToggle()完整回调：

menu.fadeToggle(function() {
    if($('.nav-container').is(':visible'))
    {
        $('body').addClass("fixedPosition");
    }
    else
    {
        $('body').removeClass("fixedPosition");
    }
});

removeClass不起作用 - 不删除类

3 个答案: