响应式下拉菜单定位

Question

I'm creating a website for a client, and it contains a responsive dropdown menu which is loaded via a jquery script. The code is below.

I have a problem though. When I give the container div #menu a position: static; everything seems to go well. However, when I scroll and try to open the menu somewhere halfway the page (on mobile that is of course), It opens at the top of the page (above the content instead of over the content), so I have to scroll back to the top to see it.

If i give the container div #menu a position: fixed; the menu does load over the content, but then I can't scroll in the menu so I can't scroll to the last menu items.

Who can help me out here?

EDIT: I can't post the client's site (it's on the client's development area and only cleared IP's have access) but I use almost the same code on this website . That website has the same problem, so you can test it there.

I hope this will help to solve the problem, my client is getting impatient... thanks in advance!

HTML:

<div id="menu">
<div class="menu-top-menu-container">
    <ul id="menu-top-menu" class="menu">
        <li><a href="#">menu item 1</a>
        </li>
        <li><a href="#">menu item 2</a>
        </li>
        <li><a href="#">menu item 3</a>
        </li>
    </ul>
</div>

CSS

/* Responsive menu */
#menu {
position: static;
float: left;
width: 98%;
height: auto!important;
margin: 110px 0 10px 0;
padding: 0px 1% 0px 1%;
line-height: 25px;
background-color: #efefef;
z-index: 99;
}
#menu li {
display: list-item;
list-style-type: none;
}
/* Menu items */
ul#menu-top-menu {
float: left;
top: 0px;
left: 0px;
width: 100%;
max-width: 1000px;
}
/* Lijst menu items */
#menu #menu-icon {
float: right;
position: fixed;
top: 53px;
right: 22px;
display: block;
background: url(http://www.bobdewebbouwer.nl/2014bybob/wp-content/themes/2014bybob/foto/menu.png);
background-repeat: no-repeat;
height: 30px;
width: 30px;
margin: 0 0px 5px 5px;
z-index: 999;
}
/* Menu icon tonen */
#menu #menu-top-menu {
display: none;
clear: both;
}
/* Menu verbergen tot er geklikt wordt op menu icon */
ul#menu-top-menu li {
padding: 10px 0 10px 0;
display: block;
clear: both;
text-align: left;
width: 95%;
}
/* Menu items wat hoger maken */
ul#menu-top-menu li a {
width: 100%;
}
ul#menu-top-menu li:hover ul {
margin-top: 10px;
}

jQuery

jQuery(document).ready(function ($) {

/* prepend menu icon */
$('#menu').prepend('<div id="menu-icon"></div>');

/* toggle nav */
$("#menu-icon").on("click", function () {
    $("#menu-top-menu").slideToggle();
    $(this).toggleClass("active");
});

});

Answer 1

Try this:

 var _responsiveDropDown = function (selectors) {

            $(document).on('click', selectors.dropDownSelector, function (e) {
                var _menuHeight = $(selectors.menuSelector).height(),
                    _openTopLimit = _menuHeight;

                if (selectors.isOpenTopSmallLimit) {
                    _openTopLimit = _openTopLimit / 2;
                }
                var _distance = $(selectors.lowerlimitSelector).offset().top - $(this).offset().top - _openTopLimit;

                if (_distance < _menuHeight) {
                    $(selectors.openedMenuSelector).css('top', -(_menuHeight + selectors.dropdownTopMargin) + 'px');
                } else {
                    $(selectors.menuSelector).css('top', '');
                }
            });
        }

usage:

var dropDownSelectors = {
                            menuSelector: 'ul#menu-top-menu',
                            openedMenuSelector: '.open > #menu-top-menu',
                            dropdownTopMargin: 19,
                            isOpenTopSmallLimit: false
                        }


responsiveDropDown(dropDownSelectors);