Как прокрутить оверлейный div на мобильном телефоне

Question

У меня есть мобильный сайт с навигационным меню, которое отображается при нажатии кнопки фиксированной позиции в правом верхнем углу. Это меню также фиксируется так, что верхняя часть меню начинается на 10 пикселей ниже нижней части кнопки. Проблема в том, что это меню навигации может быть больше, чем высота используемого устройства, и когда вы попытаетесь прокручивать его, будет прокручиваться содержимое за навигационным меню, видя, что оно исправлено. Может ли кто-нибудь помочь мне обойти это?

Answer 1

В соответствии с моим комментарием:

Вы должны использовать JS, чтобы найти высоту экрана, верхней части меню и установите максимальную высоту меню разности этих

Для высоты окна использовать $('window').height()

Для расстояния параметра меню из верхней части браузера: $('.menu').offset()

функция должна жить в слушателе событий шоу меню:

var maxHeight = $(window).height() - $('.menu').offset(); 
$('.menu').css({ "max-height" :maxHeight}) 

Убедитесь, что overflow:scroll; установлен на вашем menu

Answer 2

Что вам нужно сделать, это положить DIV с классом (я выбрал scrollable) в меню навигации, которое имеет прокручивать содержимое, а затем установить CSS для этого DIV быть что-то вдоль линий:

div.scrollable{ 
    overflow : auto; 
    position : relative; 
    } 

Таким образом, div (и внутреннее содержимое меню навигации) будет прокручиваться, в то время как положение в целом меню остается фиксированным.