Fixed Header jQuery Mobile

Ist es möglich, feste Header jQuery Mobile zu erhalten, mit einer Zeile oben gesetzt, wie im folgenden Link?Fixed Header jQuery Mobile

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

Wenn Sie sehen, die Verbindung über der Header-Bild nach oben geht und der Kopf kommt und auf der Oberseite befestigt zu werden.

Bevor scollen enter image description here

Nach Scrollen nach oben enter image description here

ich iScroll mit ausprobiert habe, dass ich den festen Header bekommen kann, aber nicht die Wirkung wie in dem obigen Link. Gibt es einen Link oder ein Tutorial zu diesem Thema? Vielen Dank für Ihre Zeit und Hilfe im Voraus.

Quelle

2012-08-14 Jay Mayu

diese geben Ihnen einen guten Start [wie jQuery Mobile Kopf- und Fußzeilen fixiert halten] [1] [1]: http://stackoverflow.com/questions/4724068/ how-to-keep-jquery-mobil-header-and-footer-fixed – rahul

@rahul: Nein, es ist anders. – nhahtdh

Leider gibt es in jQuery Mobile nichts, mit dem Sie die oben genannten Funktionen sofort implementieren können. Sie können eine [feste Kopfzeile] haben (http://jsbin.com/iyowog/1/) (*** Fenster zum Ändern der Größe, um Seitenumblättern *** zu machen), aber nicht eine, die auf der Hälfte der Seite beginnt und dann behoben wird . – Jeemusu

Ok, so dass Sie habe mich gefragt, wie ich dies in jQuery Mobile implementieren könnte, da es praktisch in einem Projekt kommen könnte ich arbeite.

Mit JQuery Waypoints können Sie überprüfen, wann bestimmte Elemente oben auf der Seite erscheinen und in welche Richtung die Seite in diesem Moment gescrollt wurde. Ich habe die folgende jsbin einrichten Sie eine mögliche Lösung zeigen:

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

Die Wegpunkte Code ist sehr einfach, geben Sie einfach das Skript in der Unterseite Ihrer Website, bevor Sie den Body-Tag schließen. Sie können das Plugin dann mit .waypoint() initialisieren. Ich habe den folgenden Code in meinem Beispiel verwendet, der die Kopfzeile beim Scrollen nach unten korrigiert und sie beim erneuten Scrollen über den ursprünglichen Punkt hinaus löscht.

$('#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'); 
    } 
});

Beste ist, dass es dynamisch ist, spielt keine Rolle, wo der Header innerhalb der Seite ist es in der Lage sein, wenn sie zu sagen, dass es die oben auf der Seite ist zu schlagen.

Quelle

2012-08-14 06:07:20 Jeemusu

Sie können diesen Code versuchen.Dies sollte funktionieren.Bitte beachten Sie, dass ich es nicht in einem Handy-Browser getestet habe.Lassen Sie mich wissen, wenn das hilft.

<!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>

Eine Demo hier - http://jsfiddle.net/Xg86Z/

Quelle

2012-08-14 06:05:32 user700284

Fixed Header jQuery Mobile

Antwort

Verwandte Themen