en-tête fixe parchemins/traîne en jquery mobile

Je suis en train de travailler sur une application web mobile à l'aide de jquery mobile et phonegap. J'ai développé un hello world app. Il a en-tête, pied de page et le contenu de la zone. L'en-tête et pied de page sont fixés à l'aide de data-position="fixed" attribut. Mais le problème avec l'en-tête et pied de page, quand je scroll vers le bas et lorsque le contenu est fini, et il n'y a pas besoin de faire défiler de plus que son en-tête traîne en bas(pour la souplesse ou d'une indication et il n'y a pas plus de contenu). Comme dans d'autres applications ios, cette fonctionnalité existe mais dans ces applications l'en-tête et pied de page n'est pas à la traîne en haut et en bas de la zone de contenu ne traîne. Merci de voir la photo de ce que je veux dire

Comme dans l'image ci-dessus l'en-tête est déplacée vers le bas à côté de laquelle je ne veux pas. Je ne veux que la zone de contenu pour avoir cette fonctionnalité. Comment puis-je faire de cette façon, de sorte que le contenu de la zone traîne seulement quand il n'y a pas plus de contenu disponible pour voir?

Toute aide de css, jquery, jquery mobile astuce?

Mise à jour

Code HTML ici

<div data-role="page">

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

        <div data-role="content" id="contents">
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
    </div><!-- /page -->

Pouvez-vous mettre un peu de code?
J'ai ajouté le code html
Êtes-vous primordial <h1>? Fait la même chose sur tous les navigateurs?
Je ne suis pas l'exécution de cette dans le navigateur. Je suis à l'aide de phonegap l'exécuter en tant qu'application native.

OriginalL'auteur 2619 | 2013-05-04

Malheureusement, votre exemple n'est pas d'aller travailler parce que iOS ne vous permettra pas que.

Solution 1 - iOS et Android

Heureusement, il y a une 3ème partie Mobile jQuery plugin qui va vous aider avec ce problème et il fonctionne comme un charme. C'est un iOS et Android solution.

Ce que vous avez besoin est un iScrollView plugin fait sur une base de iScroll plugin.

Je ne peux pas vous faire un jsFiddle exemple parce qu'il ne travaille pas avec des iScrollView, au moins je ne peux pas le faire fonctionner, donc voici un exemple que vous pouvez simplement copier dans le nouveau fichier HTML et l'essayer sur votre iOS.

D'abord voici un travail en ligne de l'exemple que j'ai fait: http://www.fajrunt.org/

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Demo</title>
<link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview-pull.css" />   
<script src="http://www.fajrunt.org/js/jquery-1.9.1.min.js"></script>
<script src="http://www.fajrunt.org/js/jquery.mobile-1.3.1.js"></script>    
<script src="http://www.fajrunt.org/js/iscroll.js"></script>
<script src="http://www.fajrunt.org/js/jquery.mobile.iscrollview.js"></script> 
</head>
<body>
<div data-role="page" class="index-page">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="header">
<h1>INDEX PAGE</h1>
</div>
<div data-role="content" class="example-wrapper" data-iscroll>
<p>some content that will be scrolled</p>
<p>Some more content that will be scrolled</p>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<p>Even more content. It will scroll whatever is in the data-iscroll div.</p>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>         
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="footer">
<h1>My Footer</h1>
</div>
</div>
</body>
</html>

Comme vous pouvez le voir cet exemple fonctionne comme par magie. Encore une chose, si vous ne saviez pas que iScrollview peut également aider à résoudre un autre problème. Disons que vous avez défiler vers le bas de votre page et il y a un bouton à une autre page. Lorsque vous cliquez dessus, généralement la page va sauter vers le haut et ensuite seulement page de transition vers une autre page. Ce n'est pas une erreur, c'est juste comment le point de vue des œuvres. Mais tnx à iScrollView vous page de la transition juste à partir de ce point et quand vous revenez à votre page seront toujours à la même position.

Une dernière chose si vous êtes un développeur iOS, iScrollView n'a rien à voir avec UIScrollView.

Solution de 2 - iOS uniquement

Il est un pur css correctif pour résoudre votre problème, mais il ne fonctionne que sur iOS qui est la façon dont je suis le présentant comme une deuxième solution.

Nouveau ce n'est pas ma solution et la page officielle peut être trouvé ici: http://outof.me/native-scrolling-in-jquery-mobilephonegap-applications/

Avec quelques changements de page vous pouvez lancer iOS faire défiler la page avec jQuery Mobile.

HTML :

<!DOCTYPE html>
<html>
<head>
<title>Scrollable Content Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery Mobile styles -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<!-- Fix for scrolling on iOS prior to iOS 6 -->
<style type="text/css">
body {
margin: 0;
}
div#container {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
div[data-role="header"] {
position: absolute;
top: 0;
left: 0;
right: 0;
}
div[data-role="content"] {
position: absolute;
top: 41px;
bottom: 0;
left: 0;
right: 0;
}
.scrollable {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
/* iOS specific fix, don't use it on Android devices */
.scrollable > * {
-webkit-transform: translateZ(0px);
}
</style>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).one('mobileinit', function () {
//Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
//Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="container">
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Scrollable Content</h1>
</div>
<div data-role="content" class="scrollable">
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>   
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>      
</div>
</div>
</body>
</html>

Dernière question

Concernant votre deuxième question. Lorsque vous enfin atteindre le fond ou si vous êtes en haut d'une page, vous ne serez pas en mesure de l'empêcher de rebondir. Seule façon vous pouvez éviter le rebondissement est si vous voulez éviter de défilement. Et ce n'est pas une option dans votre cas, vous avez besoin de défilement pour accéder au bas de la page.

Notes finales

Si vous voulez en savoir plus sur iScroll + iScrollView, comment ils travaillent avec des exemples, puis jetez un oeil à ce article.

Je vous remercie pour votre réponse. Je ne veux pas l'empêcher de rebondir. Je ne veux rebondir la zone de contenu, pas d'en-tête et pied de page, tout comme d'autres applications iOS natives. Par exemple, dans facebook app. Lorsque l'utilisateur fait défiler vers le haut et il veut toujours faire défiler alors la tête de bâtons vers le haut, mais aussi le contenu de la zone de rebonds. Ainsi, l'actualisation de la commande est exécutée pour recharger le contenu à partir du serveur. (Je ne veux pas ajouter la fonctionnalité d'actualisation ici, mais seulement le rebond de l'en-tête et pied de page est me déranger.)
Thx Gajotres pour ces 2 solutions. J'ai été en utilisant iscrollview et le fixe en-tête/pied de page fonctionnent parfaitement. Cependant, sur une longue liste avec des images pointant vers une autre page, allez à la page et de revenir (bouton retour) prendre un temps très long. J'ai été à la recherche à d'autres solutions (solution 2 & renversement filamentgroup.github.io/Renversement) et aucun ne semble pas fonctionner dans phonegap 2.6.0. Si je copie & coller la solution 2 dans un index.html sans rien d'autre et de faire une application phonegap, la tête encore à la traîne. Est-il un Phonegap 2.6 question connexe ? PS:je suis en train de résoudre ce problème sur iphone 3GS avec IOS 5.1)
Il y a un bug sur le iScroller JS, il me semble. j'obtiens une erreur liée à cette ligne de code }( jQuery, window, document )); Uncaught ReferenceError: jQuery n'est pas définie à l'intérieur d'jquery.mobile.iscrollview.js ligne de 1912
Corrigé de la question, mais il ne fonctionne pas comme prévu. le pied de page et en-tête de encore disparaît lorsque vous faites défiler

OriginalL'auteur Gajotres

7

Ajoutez cette ligne à votre config.xml fichier si vous utilisez Cordova >=2.6
```
<preference name="DisallowOverscroll" value="true" />
```
Que l'option qui permet d'être appelé UIWebViewBounce ainsi, si vous utilisez une version plus ancienne, vous aurez besoin de cette ligne config.xml:
```
<preference name="UIWebViewBounce" value="false" />
```
OriginalL'auteur nside
3

Ajout de données-tap-toggle="false" à l'en-tête/pied de page devrait faire l'affaire, par exemple
```
<div class="header" data-role="header" data-position="fixed" data-tap-toggle="false">
```
OriginalL'auteur Kwok Pan Fung
2

L'exemple de code qui utilise iScrollView ne marche pas. j'ai copié et collé l'exemple ci-dessus page html et sur l'android htc one x appareil sous ICS et sur un HTC desire runing 2.3, l'en-tête et pied de page disparaît lorsque vous êtes défilement.

OriginalL'auteur jonney
0

J'ai le même problème à l'aide de phonegap (2.9.0) et de la compilation pour Android (4.1.2), mais pas dans les autres plates-formes.

La solution la plus raisonnable est de ne pas utiliser l'attribut fixe sur cette plate-forme.

OriginalL'auteur Dave
0

J'ai du mal avec ce depuis des lustres, et cela a vraiment fonctionné pour moi, si vous utilisez l'application:
```
$("body").fixedtoolbar({ tapToggle: false });
```
Voir la description complète ici:
https://forum.jquery.com/topic/is-this-really-so-difficult-full-screen-non-scrolling-page-with-header-and-footer

OriginalL'auteur raoul_dev
0

Il suffit d'ajouter le overflow:scroll dans votre en-tête et pied de page tag:
```
<div data-role="header" data-position="fixed" style="overflow:scroll;">
```
OriginalL'auteur Matthew

Vous devez vous connecter pour publier un commentaire.