Making a tooltip-like flyout-menu scrollable?

Question

If you have a look at http://jsfiddle.net/MG4hw/2/ there is a red menu button. Hovering over it shows a green flyout menu. The problem is that the flyout menu does not stay aligned with the button when scrolling either the blue taskbar or the pink content (they scroll independently from one another).

(The flyout menu is absolutely positioned because as a relative child element of the blue taskbar it would be hidden by the former's overflow-property.)

I tried .scroll() and .scrollTop() (see code comments) but it didn't work.

At the very least I would like to hide the flyout menu upon scrolling if there's no other possibility.

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

Any help would be greatly appreciated!

Answer 1

like so? http://jsfiddle.net/honk1/MG4hw/4/

here is the stuff i changed:

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

plus i included a very bad style of css reset, *, so the elements dont have any default values. its evil, but it works for the example.

* {
  margin: 0;
  padding: 0;
}

EDIT

here is another fiddle, that also reacts on scroll. check the functions, jQuery.bind() is depreciated since v1.7 in favor to jQuery.on(). plus i used the "hover" function as well, just to show you another method on how to bind mouse events.. plus i changed the order of the functions, took some out of the on handler and put them into the ready handler..

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

and why are you using jQuery 1.9.1, when there exitsts 1.11.0 or even 2.1 (2.1. is not compatible with some older versions of ie, i guess..)