CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
andrewm
andrewm

Reputation: 2642

How to scroll an overlay div on mobile

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?

Upvotes: 1

Views: 2565

Answers (2)

caffeinated.tech
caffeinated.tech

Reputation: 6548

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

Upvotes: 2

aamirl
aamirl

Reputation: 1550

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.

Upvotes: 1

Related Questions