Encabezado fijo jQuery Mobile

¿Es posible obtener encabezados fijos jQuery Mobile, con una fila establecida en la parte superior como en el siguiente enlace?Encabezado fijo jQuery Mobile

http://www.expedia.com.au/p/promos/Beach-Breaks.htm

Si aparece el enlace de la imagen de cabecera por encima de sube y la cabecera viene y conseguir fijado en la parte superior.

Antes de desplazarse hacia arriba enter image description here

Después de desplazarse hasta enter image description here

He intentado usar iScroll que puedo conseguir la cabecera fija, pero no el efecto que en el enlace anterior. ¿Hay algún enlace o tutorial sobre este tema? Muchas gracias por su tiempo y ayuda con anticipación.

Fuente

2012-08-14 Jay Mayu

esto le dará un buen comienzo [cómo mantener encabezado y pie de página jQuery móvil fija] [1] [1]: http://stackoverflow.com/questions/4724068/ how-to-keep-jquery-mobile-header-and-footer-fixed – rahul

@rahul: No, es diferente. – nhahtdh

Desafortunadamente, no hay nada en jQuery Mobile que le permita obtener la funcionalidad anterior lista para usar. Puede tener un [encabezado fijo] (http://jsbin.com/iyowog/1/) (*** ventana de cambio de tamaño para hacer que la página se desplace ***), pero no una que comience a la mitad de la página y luego se solucione . – Jeemusu

Ok, por lo que me tienes pensando en cómo podría implementar esto en jQuery Mobile, ya que podría ser útil en un proyecto que estoy trabajando.

Usando JQuery Waypoints, es posible verificar cuando ciertos elementos tocan la parte superior de la página, y en qué dirección se desplazó la página en ese momento. He creado la siguiente jsbin a mostrar una posible solución:

http://jsbin.com/iyowog/3/edit

El código de puntos de ruta es muy sencillo, basta con incluir la secuencia de comandos en la parte inferior de su sitio antes de cerrar el cuerpo de la etiqueta. A continuación, puede inicializar el complemento con .waypoint(). Utilicé el siguiente código en mi ejemplo, que corrige el encabezado cuando se desplaza hacia abajo y lo desenlaza cuando vuelve a desplazarse por su punto original.

$('#header').waypoint(function(event, direction) { 

    if (direction === 'down') { 
     $('#header').attr('data-position', 'fixed'); 
     $('#header').addClass('ui-header-fixed'); 

    } else { 
     $('#header').attr('data-position', ''); 
     $('#header').removeClass('ui-header-fixed'); 
    } 
});

La mejor parte es que es dinámico, no importa donde la cabecera está dentro de la página será capaz de decir cuando se golpea la parte superior de la página.

Fuente

2012-08-14 06:07:20 Jeemusu

Puede probar este código. Esto debería funcionar. Tenga en cuenta que no lo he probado en el navegador de un teléfono móvil. Avíseme si eso ayuda.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script> 
     $(document).on("pageshow","#page",function(){ 
      $(this).css("top","100px"); 
      $(".ui-header-fixed").css("position","absolute"); 
     }) 

     $(window).scroll(function(event){ 
      if($(window).scrollTop() >= 100){ 
       $(".ui-header-fixed").css("position","fixed"); 
      } 
      else{ 
       $(".ui-header-fixed").css("position","absolute"); 
      } 
     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
</head> 
<body> 
<div style="height:100px;background-color:#ccc"></div> 
<div data-role="page" id="page"> 

    <div data-role="header" data-position="fixed"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <div data-role="content" style="height:1500px;">  
     <p>Lorem ipsum dolor</p>   
    </div><!-- /content --> 

</div><!-- /page --> 

</body> 
</html>

Una demostración aquí - http://jsfiddle.net/Xg86Z/

Fuente

2012-08-14 06:05:32 user700284

Respuesta

Cuestiones relacionadas