fixed footer on bottom of the page with jquery

Question

I have a problem with a footer. I tried to make a footer stick to the bottom of my page

but when i scroll the footer scrolls to the top also. like it is fixed on the page. On my website i use jQuery, jQuery Mobile, bootstrap.

there is also an extra footerbar that does stay fixed but i can not write anything in it.

<div data-role="footer" class="ui-bar" data-position="fixed">
<p>footer</p>
</div>

example on m.alfanet.be

Answer 1

Your page layout is not correct, you are missing a div with data-role='page'

Basic page jquery mobile layout:

<div data-role="page" id="foo">

    <div data-role="panel" id="mypanel">
       <a href="#doSomething">doSomething</a>
    </div><!-- /panel -->

    <div data-role="header">
        <h1>Foo</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <a href="#popupBasic" data-rel="popup">Open Popup</a>
        <a href="#mypanel">Open panel</a>   
    </div><!-- /content -->

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

    <div data-role="popup" id="popupBasic">
        <p>This is a completely basic popup, no options set.<p>
    </div>
</div>

jsfiddle

http://jsfiddle.net/tronc/Sh6BF/

Answer 2

It seems you are designing a site for mobile phones (as you are making use of jQuery Mobile).

Fixed positions on mobile phones don't work pretty well. The behavior of your fixed element will be different for each mobile browser.

Take a look at this great study by Brad Frost .