Javascript object fixed scrolling

Question

I have a curious bug. I have a bar at the top that's fixed via CSS. Simple. However, opening a jQuery dropdown within this bar is buggy as it doesn't scroll, when i do. The dropdown stays at it's current position.

So, i tried to fix that with jQuery:

$(document).ready(function () {
    var dropdownMenu = $('.dropdownMenu'),
        top = $('#topMenu').height();

    $(window).on('scroll click', function () {
        $(dropdownMenu).css('position', 'fixed');
        $(dropdownMenu).css('top', top + 7 + 'px');
    });
});

If i open the dropdown at the very top of the page and scroll, it works as expected. But when scrolling down and open the dropdown, it's positioned everywhere, but not where i expect it. As soon, as i scroll, it fixes it's position.

So my problem is, that on click, it opens on the wrong position. Not more, not less.

Any idea?

Answer 1

A quick and dirty hack:

$(function() {
    WCF.Dropdown.init();

$('.dropdownToggle').click(reposition);

$(window).on('scroll click', reposition);
});

function reposition() {
    var dropdownMenu = $('.dropdownMenu'),
        top = $('#topMenu').height();
    setTimeout(function() {
        $(dropdownMenu).css('position', 'fixed');
        $(dropdownMenu).css('top', top + 7 + 'px');
    }, 10);
}