使类似工具提示的弹出菜单可滚动？

Question

如果您查看http://jsfiddle.net/MG4hw/2/，就会看到一个红色的菜单按钮。将鼠标悬停在它上面会显示一个绿色弹出菜单。问题在于，在滚动蓝色任务栏或粉红色内容时（它们彼此独立滚动），弹出菜单不会与按钮保持对齐。

（弹出菜单是绝对定位的，因为作为蓝色任务栏的相对子元素，它会被前者的溢出属性隐藏。）

我尝试了 .scroll() 和 .scrollTop()（参见代码 cmets），但没有成功。

如果没有其他可能性，至少我想在滚动时隐藏弹出菜单。

function positioning() {
$('#start').bind({
    mouseenter: function () {
        var startOffset = $(this).offset();

        $('.start_options').css({
            position: 'absolute',
            top: startOffset.top, //+ $(document).scrollTop(), did not work
            left: startOffset.left - $('.start_options').width()
        });

        $('.start_options').show();
    },

    mouseleave: function () {
        $('.start_options').hide();
    }
});

$('.start_options').bind({
    mouseleave: function () {
        $(this).hide();
    },
    mouseenter: function () {
        $(this).show();
    }
});
};

$(document).ready(positioning); //function call upon loading page
$(window).resize(positioning); //function call upon window resizing
//$(window).scroll(positioning); did not work either

任何帮助将不胜感激！

Answer 1

喜欢吗？ http://jsfiddle.net/honk1/MG4hw/4/

这是我改变的东西：

var startOffset = $(this).position();
$('.start_options').css({
  position: 'fixed',
  top: startOffset.top + 8,
  left: $("#some_content").width() - $('.start_options').width()
});

加上我包含了一个非常糟糕的css重置样式，*，所以元素没有任何默认值。它是邪恶的，但它适用于示例。

* {
  margin: 0;
  padding: 0;
}

编辑

这是另一个小提琴，它也对滚动做出反应。检查函数，jQuery.bind() 从 v1.7 开始贬值，转而使用 jQuery.on()。另外，我还使用了“悬停”功能，只是为了向您展示如何绑定鼠标事件的另一种方法.. 另外我更改了函数的顺序，从 on 处理程序中取出一些并将它们放入准备好的处理程序中..

http://jsfiddle.net/honk1/MG4hw/10/

当退出 1.11.0 甚至 2.1 时，你为什么使用 jQuery 1.9.1（2.1. 与某些旧版本的 ie 不兼容，我猜..）