Jquery 动画和偏移导致意外行为答案

【问题标题】：Jquery animate and offset causing unexpected behaviorJquery 动画和偏移导致意外行为
【发布时间】：2013-08-12 03:30:08
【问题描述】：

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

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

谁能帮我理解为什么“菜单触发器”在没有滚动时工作正常，但在我滚动“内容”框时停止工作。

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

Here is a fiddle with everything I have now.

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);
    };
});

【问题讨论】：

标签： jquery jquery-animate offset

【解决方案1】：

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

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

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

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

【讨论】：

非常感谢！哈哈，这么小的东西，我在想if语句可能与它有关。但是我不知道除了顶部偏移之外如何触发它。所以我刚刚学会了 hasClass、addClass 和 removeClass 技巧 :) 非常好！
没问题，乐于助人。谢谢，这是一个非常有用的技术:)
我遇到了另一个问题...当列表中的选项数量超出屏幕时，我无法滚动到它们？我猜这与固定定位有关，但是如何抵消呢？任何想法:)
您能否提供一个显示此问题的 jsfiddle。谢谢
jsfiddle.net/kVk82/7 当您单击菜单触发器时，菜单变为“屏幕”，并且无法滚动:(我希望在这里实现的是当菜单关闭时，您应该能够将菜单的内容向下滚动到菜单触发器。