Позитивное расположение выпадающего меню

Question

Я создаю веб-сайт для клиента и содержит отзывчивое выпадающее меню, которое загружается через скрипт jquery. Код ниже.

У меня проблема. Когда я даю контейнеру div #menu позицию: static; все, кажется, идет хорошо. Однако, когда я прокручиваю и пытаюсь открыть меню где-то на полпути страницы (на мобильном телефоне, конечно), он открывается в верхней части страницы (над содержимым, а не над содержимым), поэтому мне нужно прокрутить назад до наверху, чтобы увидеть это.

Если я даю контейнер div #menu положение: исправлено; меню загружает содержимое, но затем я не могу прокручивать меню, поэтому я не могу прокрутить до последних пунктов меню.

Кто может помочь мне здесь?

EDIT: я не могу опубликовать сайт клиента (он находится в зоне разработки клиента и только очищенный доступ к IP-адресу), но я использую почти тот же код на this website. У этого веб-сайта такая же проблема, поэтому вы можете проверить его там.

Я надеюсь, что это поможет решить проблему, мой клиент становится нетерпеливым ... спасибо заранее!

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

Попробуйте это:

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', ''); 
       } 
      }); 
     } 

использование:

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


responsiveDropDown(dropDownSelectors);