iOS 7 overflow scroll for fixed Div

Question

I have found similar questions to this but most are pre-Ios 7 and use solutions which I can't get to work.

My website at http://blueleafstudio.net/portfolio is responsive and displays the main navigation as a pop-out list on mobile devices (tap the bar symbol in the top right).

There are two things I need to achieve

1.The header bar of the site remains fixed so that the user can quickly access the menu and sidebar when scrolling through pages on the site.

2.The main navigation (which has to be a child element of the fixed header) is scrollable on it's y-axis as it may contains an unknown number of menu items

What I have so far works fine with a small window on a desktop but iOS won't show me a second scroll bar (or move the scrollbar to the nav element when it is shown).

Can anyone help me find a solution?

Answer 1

After a lot of research I finally found out that this was a bug with iOS safari and viewport units as described here: http://blog.rodneyrehm.de/archives/34-iOS7-Mobile-Safari-And-Viewport-Units.html

Rather than using viewport units to set the height of the pop out i've had to resort to javascript:

    var viewportHeight = $(window).height() + 70;
    var mobileNav = $('.header nav');

    mobileNav.css({height: viewportHeight});

    $(window).resize(function() {
        viewportHeight = $(window).height() + 70;
        mobileNav.css({height: viewportHeight});
    });

After doing that, scrolling works as expected.