jQuery Mobile panel positionFixed Option

Last Updated : 12 Feb, 2022

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops.

In this article, we will be using the jQuery Mobile panel positionFixed option to set whether the specified panel has fixed positioning or not to check whether the contents are in view even if the page is scrolled down. This option also allows the page to scroll while the panel stays fixed. It is recommended not to enable this feature when panels are used within Android apps because of poor performance and display issues.

Syntax:

Initializing the panel with the positionFixed option.

$( ".selector" ).panel({ positionFixed: true });

Setting the positionFixed option.

$( ".selector" ).panel( "option", "positionFixed", true );

Getting the positionFixed option.

var theme = $( ".selector" ).panel( "option", "positionFixed" );

CDN Link: First, add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”>
<script src=”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>

Example: This example describes the jQuery Mobile panel positionFixed option.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet"
          href= 
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> 
    <script src= 
"//code.jquery.com/jquery-3.2.1.min.js"> 
  </script> 
    <script src= 
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <div data-role="page"> 
            <h1 style="color:green;"> 
                GeeksforGeeks 
            </h1> 
            <h3>jQuery Mobile panel positionFixed Option</h3> 
            <div role="main"> 
                <a href="#divID" data-role="button" 
                   data-inline="true" 
                   data-icon="bars">GeeksforGeeks</a> 
            </div> 
            <div data-role="panel" id="divID" data-theme="b"> 
                <div class="panel-content"> 
                    <h3>GeeksforGeeks</h3> 
                    <p>It is a computer science portal.</p> 
  
                    <a href="#demo-links" data-rel="close" 
                       data-role="button" data-theme="c" 
                       data-icon="delete"
                       data-inline="true">Close this panel</a> 
                </div> 
            </div> 
            <input type="button" id="Button" 
                   value="Value of the positionFixed option"> 
            <div id="log"></div> 
        </div> 
    </center> 
    <script> 
        $(document).ready(function () { 
            $("#divID").panel({ 
                positionFixed: true 
            }); 
            $("#divID").panel("option", "positionFixed", true); 
            $("#Button").on('click', function () { 
                var a = $("#divID").panel("option", "positionFixed"); 
                $("#log").html(a); 
            }); 
        }); 
    </script> 
</body> 
  
</html>