Question

我一直在努力了解为什么当我点击“菜单触发器”

时会发生以下情况

当“内容”排在前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);
    };
});

Answer 1

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

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

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

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

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

1 个答案: