0

我已经尝试了几个小时来了解为什么单击“菜单触发器”时会发生以下情况

  • 当“内容”为前 0 时，“菜单触发器”按预期工作（例如，单击树形菜单图标使菜单上下移动）
  • 当我滚动“内容”时，“菜单触发器”停止工作

任何人都可以帮助我理解为什么“菜单触发器”在没有滚动的情况下工作正常，但是一旦我滚动“内容”框就停止工作。

顶部元素是固定的并设置为顶部 0，因此它不应该受到影响（据我了解。这显然是这里缺少的哈哈。对于 JS/Jquery 来说还是新的）。

这是我现在所拥有的一切。

var topMenu = $('#topMenu');
var topMenuItem = $('#topMenu ul li a');
var top = $('#top');
var menuTrigger = $('.menu-trigger');
var time = 350;
var easing = 'easeOutCirc';

topMenu.css({
    'top': -(topMenu.outerHeight())
});

menuTrigger.on('click', function () {

    if (top.offset().top == 0) {

        top.animate({
            top: topMenu.outerHeight()
        },
        time,
        easing);

    } else {

        top.animate({
            top: 0
        },
        time,
        easing);
    };
});

topMenuItem.on('click', function () {

    if (topMenu.offset().top == 0) {

        top.animate({
            top: 0
        },
        time,
        easing);
    };
});
4

1 回答 1

1

向下滚动内容时“菜单触发器”按钮停止工作的原因是因为这一行：

if (top.offset().top == 0) {

#top div 设置为“位置：固定；” 这意味着当您向下滚动内容时，此 div 的“顶部”值将从 0 更改，因为它不再位于文档的顶部。这会导致您的 if 语句不再按您的预期工作。

这是工作的jsfiddle：http: //jsfiddle.net/kVk82/3/

于 2013-08-12T04:04:21.453 回答