2014-11-04 4 views
1

오른쪽 상단의 고정 위치 버튼을 클릭하면 표시되는 탐색 메뉴가있는 모바일 웹 사이트가 있습니다. 이 메뉴는 메뉴의 맨 위가 버튼 하단에서 10 픽셀 아래로 시작되도록 고정되어 있습니다. 문제는이 탐색 메뉴가 사용중인 장치의 높이보다 더 길 수 있고 시도하고 스크롤 할 때 탐색 메뉴 뒤의 내용이 고정 된대로 스크롤한다는 것입니다. 누군가이 문제를 해결하도록 도와 줄 수 있습니까?모바일에서 오버레이 div 스크롤 방법

+1

, 메뉴의 상단, 이러한 차이에 메뉴의 높이를 설정하여 설정 및 설정되어 있는지 확인합니다 오버 플로우 : 스크롤; " 메뉴에서 –

+0

감사합니다. $ (window) .height()가 작동해야합니까? – lisburnite

+1

네, 그리고 브라우저 위쪽에서 메뉴의 거리를 찾고자 할 때'$ ('. menu')를 사용하십시오 : offset()' –

답변

2

내 의견에 따라 경찰 :

당신은 메뉴 화면의 높이, 상단을 찾기 위해 JS를 사용하여 신장이

의 차이로 메뉴의 최대 높이를 설정해야합니다 윈도우의 브라우저 상단에서 메뉴의 거리 $('window').height()

를 사용 $('.menu').offset()

기능은 쇼 메뉴 이벤트 리스너에 거주해야합니다

var maxHeight = $(window).height() - $('.menu').offset(); 
$('.menu').css({ "max-height" :maxHeight}) 

overflow:scroll;는 "menu 당신은 화면의 높이를 찾기 위해 JS를 사용할 필요가

1

는 클래스와 사업부를 넣어해야 할 일은 스크롤 내용이 탐색 메뉴 내에서 (나는 scrollable를 선택) 다음의 라인을 따라 뭔가 해당 사업부의 CSS를 설정 :

div.scrollable{ 
    overflow : auto; 
    position : relative; 
    } 

그런 식으로 메뉴의 전체 위치가 고정 된 상태에서 div (탐색 메뉴의 내용)는 스크롤 할 수 있습니다.

관련 문제