헤더와 푸터의 표시 위치를 지정하려면 data-position 속성을 설정한다. 헤더와 푸터는 기본적으로 inline 위치로 지정되어 있다.
<header data-role="header" data-position="fixed">
"inline"인 때에는 페이지를 스크롤 하면 툴바도 다른 컨텐츠와 함께 움직인다.
"fixed"인 때에는 처음 표시될 때에는 inline과 같이 표시되지만 페이지를 스크롤 하면 항상 그 자리에 위치한 것처럼 뷰포트에 나타난다. 또한 페이지를 두드릴 때마다 보였다 사라졌다 할 것이다. 다음의 코드를 사용해서 토글을 사용하지 않도록 설정할 수 있다.
$.mobile.fixedToolbars.setTouchToggleEnabled(false);
툴바의 페이드 효과를 사용하지 않으려면 다음과 같이 설정한다.
$.mobile.fixedToolbars.show(true);
"fullscreen"는 fixed모드와 대체로 유사하지만 화면을 두드릴 때까지는 표시되지 않는다는 것이 차이점이다. 페이지에 data-fullscreen="true"로 지정하고 헤더와 푸터에 data-position="fixed"로 설정해야 제대로 작동한다.
<section
data-role="page" id="page_01"
data-fullscreen="true"
data-title="페이지
제목">
<header
data-role="header" data-position="fixed">
…
<footer
data-role="footer" data-position="fixed">
...
