fixed header scrolls/drags in jquery mobile

Question

I am working on mobile web app using jquery mobile and phonegap. I developed a hello world app. It has header, footer and contents area. Header and footer are fixed using data-position="fixed" attribute. But the problem with header and footer is, when I scroll down and when the contents a finished and there is not need to scroll anymore then its header drags down(for flexibility or indication and there are not more contents). As in other ios apps, this feature exists but in those apps the header and footer does not drags up and down the contents area only drags. Please see the picture what I mean

enter image description here

As in above picture the header is dragged towards bottom side which I do not want. I want only the content area to have this feature. How can I make it this way so that contents area drags only when there are no more contents available to see?

Any help css, jquery or jquery mobile trick?

Update

HTML code here

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

I am not running this in browser. I am using phonegap to run it as native app. — Om3ga, May 04 '13 at 15:36

score 7 · Answer 1 · answered Aug 17 '13 at 03:27

Add this line to your config.xml file if you're using Cordova >=2.6

<preference name="DisallowOverscroll" value="true" />

That option used to be called UIWebViewBounce so if you're using an older version you'll need this line in config.xml:

<preference name="UIWebViewBounce" value="false" />

Gajotres · Accepted Answer · 2014-05-07T21:35:03.387

Unfortunately your example is not going to work because iOS will not allow you that.

Solution 1 - iOS and Android

Thankfully there's a 3rd party jQuery Mobile plugin that will help you with this problem and it works like a charm. This is an iOS and Android solution.

What you need is a iScrollView plugin made on a basis of iScroll plugin.

I can't make you a jsFiddle example because it don't work with iScrollView, at least I can't make it work so here an example that you can just copy into new HTML file and try it on your iOS.

First here's a working online example I made: 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>

As you can see this example works like magic. One more thing, if you didn't know that iScrollview can also fix another problem. Lets say you have scrolled to the bottom of your page and there's a button to the another page. When you click it usually page will jump to the top and only then page will transition to an another page. This is not an error, this is just how viewpoint works. But tnx to iScrollView you page will just transition from that point and when you get back your page will still be at the same position.

One last thing if you are an iOS developer, iScrollView doesn't have anything to do with UIScrollView.

Solution 2 - iOS only

There's a pure css fix for your problem but it will only work on iOS that is way I am showing it as a second solution.

Again this is not my solution and official page can be found here: http://outof.me/native-scrolling-in-jquery-mobilephonegap-applications/

With some page changes you can initiate iOS page scrolling with 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>

Last question

Regarding your second question. When you finally reach bottom or if you are on a top of a page you will not be able to prevent bouncing. Only way you can prevent bouncing is if you prevent scrolling. And this is not on option in your case, you need scrolling to access bottom of the page.

Final notes

If you want to find out more about iScroll + iScrollView, how they work with working examples then take a look at this article.

Thank you for your answer. I do not want to prevent bounce. I only want to bounce the content area not header and footer just like other native iOS apps. For example, in facebook app. When user scrolls to the top and he still wants to scroll then the header sticks to the top but content area bounces. Thus refresh command is executed to reload contents from the server. (I do not want to add refresh feature here but only the bouncing of header and footer is disturbing me.) — Om3ga, May 05 '13 at 04:51
Thx Gajotres for these 2 solutions. I've been using iscrollview and the fixed header/footer work perfectly. However, on a long list with images pointing to another page, going to the page and coming back (back button) take a very long time. I've been looking at other solutions (solution 2 & overthrow http://filamentgroup.github.io/Overthrow/) and none seem to work in phonegap 2.6.0. If I copy & paste solution 2 in an index.html without anything else and make a phonegap app, the header still drags. Is it a Phonegap 2.6 related issue ? PS:I'm trying to fix this on iphone 3GS with IOS 5.1) — Alain Zelink, Jun 08 '13 at 09:48
There is a bug on the iScroller JS it seems. i recieve an error related to this line of code }( jQuery, window, document )); Uncaught ReferenceError: jQuery is not defined inside jquery.mobile.iscrollview.js line 1912 — Jono, Jul 11 '13 at 09:43
Manage to fix the issue but it doesnt work as intended. the footer and header still dissapears when you scroll — Jono, Jul 11 '13 at 10:26

score 3 · Answer 3 · answered Mar 26 '14 at 07:04

3

Adding data-tap-toggle="false" to the header/footer should do the trick too, e.g.

<div class="header" data-role="header" data-position="fixed" data-tap-toggle="false">

answered Mar 26 '14 at 07:04

Kwok Pan Fung

416
5
6

score 2 · Answer 4 · answered Jul 11 '13 at 10:27

2

The sample code that uses iScrollView doesnt work. i copied and pasted the above sample html page and on the android htc one x device running ICS and on a HTC desire runing 2.3, the header and footer dissapears when you are scrolling.

answered Jul 11 '13 at 10:27

Jono

17,341
48
135
217

score 0 · Answer 5 · answered Jul 12 '13 at 18:00

0

I have the same problem using phonegap (2.9.0) and compiling for Android (4.1.2), but not in the other platforms.

The most reasonable solution was not to use the fixed attribute on that platform.

answered Jul 12 '13 at 18:00

Dave

1

score 0 · Answer 6 · answered Aug 27 '13 at 12:05

I struggled with this for ages and this really worked for me, include where you initialise the application:

$("body").fixedtoolbar({ tapToggle: false });

See the full discussion here: https://forum.jquery.com/topic/is-this-really-so-difficult-full-screen-non-scrolling-page-with-header-and-footer

score 0 · Answer 7 · answered May 29 '15 at 08:33

0

Just add the overflow:scroll in your header and footer tag:

<div data-role="header" data-position="fixed" style="overflow:scroll;">

answered May 29 '15 at 08:33

Matthew

409
4
4

fixed header scrolls/drags in jquery mobile

? Does the same happen on all browsers?

7 Answers7

Solution 1 - iOS and Android

Solution 2 - iOS only

Last question

Final notes

Linked