Intestazione fissa jQuery Mobile

E 'possibile ottenere intestazioni fisse jQuery Mobile, con una riga impostata in alto come nel link sottostante?Intestazione fissa jQuery Mobile

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

se si vede il link l'immagine di intestazione di cui sopra va su e l'intestazione viene e sempre fisso sulla parte superiore.

prima di scorrere fino enter image description here

Dopo lo scorrimento fino enter image description here

Ho provato iScroll usando che posso ottenere l'intestazione fissa, ma non l'effetto, come nel link qui sopra. C'è qualche link o tutorial su questo argomento? Grazie mille per il vostro tempo e aiuto in anticipo.

fonte

2012-08-14 Jay Mayu

questo vi darà un buon inizio [come mantenere jQuery intestazione mobile e piè di pagina fisso] [1] [1]: http://stackoverflow.com/questions/4724068/ how-to-keep-jquery-mobile-header-and-footer-fixed – rahul

@rahul: No, è diverso. – nhahtdh

Sfortunatamente, in jQuery Mobile non c'è nulla che ti permetta di ottenere immediatamente la funzionalità sopra descritta. Puoi avere una [intestazione fissa] (http://jsbin.com/iyowog/1/) (*** ridimensiona la finestra per far scorrere la pagina ***), ma non quella che inizia a metà della pagina e poi si fissa . – Jeemusu

Ok, quindi tu mi abbia fatto interroga su come avrei potuto implementare questo in jQuery Mobile in quanto potrebbe tornare utile in un progetto su cui sto lavorando.

Utilizzando JQuery Waypoints, è possibile controllare quando determinati elementi raggiungono la parte superiore della pagina e in quale direzione la pagina stava scorrendo in quel momento. Ho installato il seguente jsbin visualizzare una possibile soluzione:

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

Il codice waypoint è molto semplice, basta includere lo script nella parte inferiore del vostro sito prima di chiudere il tag body. È quindi possibile inizializzare il plug-in con .waypoint(). Nel mio esempio ho usato il seguente codice, che corregge l'intestazione quando scorri verso il basso e lo rimuove quando si torna indietro di nuovo oltre il suo punto originale.

$('#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 parte migliore è che è dinamica, non importa dove l'intestazione è all'interno della pagina sarà in grado di dire quando è colpire la parte superiore della pagina.

fonte

2012-08-14 06:07:20 Jeemusu

È possibile provare questo codice. Questo dovrebbe funzionare. Si prega di notare che non l'ho testato in un browser di telefono cellulare. Faccio sapere se questo aiuta.

<!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 demo qui - http://jsfiddle.net/Xg86Z/

fonte

2012-08-14 06:05:32 user700284

Intestazione fissa jQuery Mobile

risposta

Problemi correlati