cómo mantener fijo el encabezado y el pie de página de jquery mobile?

Question

Estoy creando un sitio web usando jQuery Mobile.

¿Cómo mantener el encabezado y pie de página móvil jquery fijo? Solo quiero que el contenido se desplace (al igual que sucede en las aplicaciones de iPhone) y mantenga los encabezados y pies de página fijos en la parte superior e inferior.

¿Alguna sugerencia?

Answer 1

Añadir este atributo a su div encabezado/pie de página:

 <div data-role="header" data-position="fixed"> 
      <h1>Header Page 1</h1> 
     </div> 

Además, es posible echar un vistazo a esto: http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

Answer 2

Otra opción es revisar iScroll: http://cubiq.org/iscroll

Answer 3

El El problema que tuve con jquery mobile fixed es que el encabezado y el pie de página se desvanecen. Me imagino que esto es algo que corregirán en el futuro, pero además de iscroll sugerido por Dan, también hay jquery mobile scrollview y guiño de herramientas. Tenía buenos resultados con ScrollView móvil jQuery, pero no hubo suerte con iscroll o guiño

1) jQuery Mobile ScrollView

• Demostración: http://jquerymobile.com/test/experiments/scrollview/
• Código: https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview/

2) Guiño Toolkit

• Tutorial: http://www.winktoolkit.org/tutorials/119/
• Demostración: http://www.winktoolkit.org/documentation/wink/ui/layout/scroller/test/test_scroller4.html?theme=default

Answer 4

Otra forma es utilizar http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html (jquery.mobile.scrollview.js, scrollview.js y easing.js) y poner los datos de desplazamiento-= "true" en la etiqueta div página como se sugiere aquí: scrollview for jQuery mobile tollbars *not* to be fixed.

Funcionó bien para mí hasta ahora.

Saludos,

E

Answer 5

Uso iScroll V4. Mantenga el encabezado y el pie de página fijos y recorra solo el contenido. iScroll necesita un contenedor DIV y elemento hijo. En el ejemplo siguiente, content_items es la div secundaria con los elementos para desplazarse. Noté que no se puede combinar data-role = "content" y el contendor DIV para iScroll en un elemento HTML !.

<script type="text/javascript"> 
var myScroll; 

$(document).ready(function() { 

    myScroll = new iScroll('wrapper'); 

}); 

</script> 
<div data-role="page"> 
    <div id="header" data-role="header" data-position="fixed"></div> 
    <div id="content" data-role="content" class="contentcontainer contentsearched"> 
     <div id="wrapper"> 
      <div id="content_items" class="content_items"></div> 
     </div> 
    </div> 
    <div id="footer" data-role="footer" data-position="fixed"> 
     <div data-role="navbar"></div> 
    </div> 
</div> 

Answer 6

le recomiendo que pruebe la última versión de jquery-mobile (1.1.0-rc). arregló este error.

echar un vistazo here

Answer 7

Para iOS 6, 7 y 8, este truco parece resolver el problema y provocar un redibujado para reemplazar correctamente la cabecera fija (con o sin panel) en el iPod, iPhone y iPad. Nota: Evaluamos el dispositivo iOS y solo agregamos este evento en ese caso *.

if (iOS()) { 
    $(document).on('blur', 'input:not(:submit), select, textarea', function() { 
     var paddingBottom = parseFloat($(".ui-mobile-viewport, .ui-page-active").css("padding-bottom")); 
     $(".ui-mobile-viewport, .ui-page-active").css("padding-bottom", (paddingBottom + 1) + "px"); 
     window.setTimeout(function() { 
      $(".ui-mobile-viewport, .ui-page-active").css("padding-bottom", paddingBottom + "px"); 
     }, 0); 
    }); 
} 

* Prueba para iOS:

var iOS() = function() { 
    var userAgent = window.navigator.userAgent.toLowerCase(); 
    return (/iphone|ipad|ipod/).test(userAgent); 
} 

Answer 8

Para habilitar este tipo de característica barra de herramientas, se aplica el = atributo de datos en pantalla completa "verdadero" y la posición de los datos = atributo "fija" tanto a la elementos Div de encabezado y pie de página. El marco también desarmará el relleno para el contenedor de contenido (ui-content)

<div data-role="header" data-position="fixed" data-fullscreen="true"> 
     <h1>Header Page 1</h1> 
    </div>