jQuery Mobile w przykładach - Nagłówek i stopka na stałym miejscu
data-position="fixed"
Nagłówek i stopka przyjmą stałą pozycję poprzez atrybut data-position="fixed".
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed"><H1>Header</H1></div>
<div role="main" class="ui-content">
<div data-role="footer" data-position="fixed"><H1>Footer</H1></div>
</div>
</body>
</html>
Pobierz kod
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed"><H1>Header</H1></div>
<div role="main" class="ui-content">
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices velit sit amet turpis viverra, mollis dictum mauris mattis. Nulla ac dignissim neque, quis suscipit dolor. Ut commodo libero non turpis eleifend, a pharetra mi faucibus. Nulla laoreet ipsum vel justo malesuada dignissim a in nibh. Donec eget tincidunt sapien, eu tristique enim. Duis sem justo, vehicula et sagittis ac, consectetur a lacus. Quisque aliquet arcu id rutrum imperdiet. Integer luctus eget nunc quis sagittis. In porta sodales dui nec laoreet. Praesent ante neque, interdum sit amet porta nec, ultricies in libero. Praesent feugiat eros in magna congue, non ultrices metus hendrerit. Donec sit amet augue magna. Pellentesque ultrices, nibh eget ultricies hendrerit, mauris purus mattis massa, et mollis nisl orci non nisi. Vestibulum feugiat lacus ut augue tincidunt, ut iaculis ex ultricies. Maecenas tristique porta suscipit. Proin efficitur dapibus nisi, eu lacinia lectus posuere in. Suspendisse mollis eu lacus quis semper. Fusce vulputate odio sed nunc efficitur, luctus ullamcorper ipsum commodo. Cras imperdiet nibh in dolor viverra, eu imperdiet nunc egestas. Fusce condimentum blandit urna et tristique. Aliquam vitae placerat nisl. Vestibulum cursus laoreet porta. In mattis, libero a lacinia imperdiet, ex orci fermentum turpis, nec consequat metus nulla ut ipsum. Donec ut pulvinar diam, nec cursus velit. Pellentesque molestie scelerisque diam ut pharetra. Morbi venenatis augue elit, vitae iaculis nisl pharetra ut. Etiam eget venenatis felis. Nulla lacinia ante eget tristique lacinia. Nam pharetra libero vel erat euismod, a mollis sapien bibendum. Sed ante nisi, maximus at ornare vel, volutpat id nisl. Integer condimentum massa quis quam facilisis iaculis.
</P>
</div></P>
<div data-role="footer" data-position="fixed"><H1>Footer</H1></div>
</div>
</body>
</html>