Question

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

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

我尝试了.scroll（）和.scrollTop（）（参见代码注释），但它没有用。

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

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/

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

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

1 个答案: