fixed content jquery mobile panel

by Juan Muñoz

HTML

<link rel="stylesheet" href="https://demos.jquerymobile.com/1.4.5/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="https://demos.jquerymobile.com/1.4.5/_assets/css/jqm-demos.css">
<script src="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700"></script>
<script src="https://demos.jquerymobile.com/1.4.5/js/jquery.js"></script>
<script src="https://demos.jquerymobile.com/1.4.5/_assets/js/index.js"></script>
<script src="https://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" class="jqm-demos" id="panel-fixed-page1" data-title="Panel fixed positioning">

  <div data-role="header" data-position="fixed">
    <h1>Fixed header</h1>
    <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    <a href="#add-form" data-icon="gear" data-iconpos="notext">Add</a>
  </div>
  <!-- /header -->

  <div role="main" class="ui-content jqm-content jqm-fullwidth">

    <h1>Panel fixed positioning</h1>

    <p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode. The right panel opens as overlay. For both panels we set <code>data-position-fixed="true"</code>. We also set position fixed
      for the header and footer on this page.</p>

    <p>The left panel contains a long menu to demonstrate that the framework will check the panel contents height and unfixes the panel so its content can be scrolled. In the right panel there is a short form that shows the fixed positioning.</p>

    <div data-demo-html="#panel-fixed-page1"></div>
    <!--/demo-html -->

    <br>
    <br>
    <br>
    <br>
    <br>

    <a href="../" data-rel="back" data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-mini ui-btn-inline ui-icon-carat-l ui-btn-icon-left ui-alt-icon ui-nodisc-icon">Back</a>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
...

CSS

.ui-panel-page-content-open {
  position: fixed;
}

JavaScript

var mem_scroll;
$("#panel-fixed-page1").on("panelbeforeopen", function(event, ui) {
  mem_scroll = $("body").scrollTop();
  $(".ui-content").css("margin-top", mem_scroll * -1);
});

$("#panel-fixed-page1").on("panelclose", function(event, ui) {
  $(".ui-content").css("margin-top", 0);
  $("body").scrollTop(mem_scroll);
});