[jQuery Mobile] 항상 제자리에 있는 Header와 Footer
문제
jQuery Mobile을 사용하면 화면의 세로 사이즈보다 긴 컨텐츠로 인해 페이지가 스크롤되면서 Header와 Footer가 화면에서 사라지는 경우가 많이 발생한다. data-position="fixed"을 사용하면 항상 위에 있긴 하지만, 페이지가 스크롤 될 때에는 사라졌다가 스크롤이 끝난 후에 다시 나타나게 된다.
반면, 네이티브 언어로 작성된 애플리케이션의 경우 Header와 Footer가 항상 제자리를 유지하게 되는데, jQuery Mobile에서도 이와 같이 항상 제자리를 유지하게 하는 방법이 있다.
해결 방법
핵심을 먼저 말하자면, 컨텐츠 사이즈를 고정시키는 것이다. 컨텐츠의 사이즈를 고정시키고, 고정된 사이즈 안에서 컨텐츠를 스크롤되게 하면 Header와 Footer는 제자리를 유지하게 된다.
pageshow 이벤트 핸들러에서 header와 footer의 height를 구한 후, screen.availHeight에서 두 높이를 뺀 값을 content의 height로 설정해주면 된다.$("div[data-role='page']").live( "pageinit", function( event )
{
for( var i = 0; i < 26; i++ )
{
var li = document.createElement( "li" );
li.innerText = String.fromCharCode( i + 65 );
$("#list").append( li );
}
$("#list").listview( "refresh" );
} );
$("div[data-role='page']").live( "pageshow", function( event )
{
resizeContent();
} );
function resizeContent()
{
var headerHeight = parseInt( $("div[data-role='header']").css( "height" ) );
var footerHeight = parseInt( $("div[data-role='footer']").css( "height" ) );
var contentHeight = screen.availHeight - headerHeight - footerHeight - 78; // 78 : iPhone bottom bar height (retina)
$("div[data-role='content']").css( "height", contentHeight );
}
그러면 아래와 같이 컨텐츠가 스크롤되더라도 Header와 Footer의 위치가 항상 제자리에 있는 모습을 볼 수 있다.
