Jquery mobile panel fixed-position not working

Question

I have a web app with two panels. When the panel is selected and displayed, the user can continue to scroll down the entire page. The problem is the panel menu scrolls down with it, leaving a bunch of blank space and the menu back at the top. I tried implementing data-position-fixed= "true" in the div of the panel, but that didn't work. I also added a css constraint of position: Fixed which helped, however when a device is turned to the horizontal position it cuts off half of the menu :/. Thank you for any input! I am also using Jquery library 1.8.3 and jquery mobile 1.3.0.

Answer 1

It should be:

<div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
</div>

not:

<div data-role="header" data-position-fixed="true">
    <h1>Fixed Header!</h1>
</div>

More info Here

Answer 2

Using position: fixed; is the right way to handle this. You should consider using media queries to change the top & left coordinates on horizontal view.

    div {
        position: fixed;
        top: 10px;
        left: 20px;
    }
    @media all and (max-device-width: 400px) {
     div {
             top: 0;
             left: 0;
             /* change these coordinates to suit when the device is rotated */
         }
    }