jQuery Mobile : 고정 헤더로 이동하는 고정 사이드 바

Question

페이지의 왼쪽에 수직 분할 뷰 막대를 갖고 싶습니다.이 고정 막대는 내가 가지고있는 data-position="fixed" 헤더 바와 같이 고정되어 있습니다.

this example처럼 (편집 :이 링크는 이제 깨졌습니다) 왼쪽의 목록도 고정되어 있으며 헤더와 함께 태그가 지정되어 있습니다.

고정 된 위치를 "상속"하기 위해 헤더에 삽입하려고했습니다. 그게 효과가 있을지 확실하지 않습니다.

다음은 내 스타일 시트의 내용입니다.

.content-right { 
    float: right; 
    width: 75%; 
} 
.content-left { 
    width: 23%; /* Not 25%: I am not using padding */ 
} 

.content-right div는 HTML에서 처음입니다.

고정 마더 보드가 고정 된 헤더가 숨겨 지거나 (이것은 클릭을 통해)이 막대가 정상적으로 미끄러 져 움직이는 것처럼 보이지만 이것은 거의 중요하지 않습니다.

Answer 1

내가 만든 해결책은 왼쪽에 고정 된 div를 사용하고 오른쪽은 자연스럽게 스크롤하는 실제 "페이지"입니다.

내 왼쪽 div가 데스크톱 브라우저에서 페이지를 벗어 났으므로 스크롤바도 페이지에서 벗어납니다. 그것은 처리되어야합니다. 그러나 iOS5에서는 -webkit-overflow-scrolling: touch 고정 구역 스크롤 기능 을 완벽하게 사용하여!

Answer 2

아무 것도 제공되지 않습니다.

내 multiview plugin을 사용할 수 있습니다. 지금 내비게이션 및 패널 기록을 마무리하고 있습니다. 또한 태블릿/스마트 폰보기의 모든 것을 수정합니다. 아직 버그가 없다면 사용할 준비가 될 것입니다 (Github에 게시하십시오). sample-overthrow

이보기는 각 패널은 별도로 overthrow을 사용하여 화면 스크롤 잠금 :

여기에 내가 함께 테스트 현재 일하고 있어요 하나의 샘플 페이지입니다. 래퍼 페이지에 data-scrollmode = "overthrow"을 추가하는 것 외에는 구성 할 수 없습니다. 어떻게 설정되었는지 보려면 HTML을 확인하십시오. 또한 조심해라. 이것은 내 타격을 통합하려는 나의 첫 번째 시도이며 아직 그렇게 부드럽지 않다.

전체 페이지가 일반 JQM 페이지처럼 스크롤됩니다. 이는 기본 동작입니다.

1/2/3 패널을 나란히 사용할 수 있습니다 ("메뉴", "중간"및 "기본"레이블을 지정해야하며 이전 버전에서 사용 된 코드에서 "전체 폭"을 제거합니다). 측면에 "탐색 바/사이드 바"만 있으면 50px 너비의 메뉴를 사용하고 거기에 툴바를 넣으십시오. 기본 패널은 자동으로 화면을 채울 수 있도록 확장되어야합니다. 필자는 툴바 안팎으로 슬라이드 할 수있는 yield 모드를 시작했습니다. 아직 끝내지 못했습니다.