How to scroll an overlay div on mobile

Question

I've got a mobile website that has a navigation menu that is displayed on click of a fixed position button in the top right. This menu is also fixed so that the top of the menu starts 10px below the bottom of the button. The problem is that this navigation menu can be longer than the height of the device being used, and when you try and scroll it will scroll the content behind the navigation menu seeing as it is fixed. Can someone help me get around this?

Answer 1

As per my comment:

You need to use JS to find the height of the screen, top of the menu and set the max height of the menu to the difference of these

For the height of the window use $('window').height()

For the menu's distance from the top of the browser: $('.menu').offset()

The function should live in the show menu event listener:

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

Make sure that overflow:scroll; is set on your menu

Answer 2

What you need to do is put a div with a class (I chose scrollable ) inside the navigation menu that has the scrollable content and then set the css for that div to be something along the lines of :

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

That way, the div (and the inside content of the navigation menu) will be scrollable while the position overall of the menu remains fixed.