개요
페이지를 아래로 스크롤할 때 사라지지 않고 상단에 고정되어 계속 표시되는 GNB를 만들어 보겠습니다. 이 내용은 Axure RP 공식 홈페이지에 올라온 내용을 제가 이해한대로 옮겨적은 글입니다.
실습 예제 파일 다운로드
실습을 위해 공식 홈페이지에 있는 예제 파일을 다운로드하시기 바랍니다.
예제 파일 다운로드
설정
예제 파일 중, Scroll-activated sticky header 페이지를 엽니다. 캔버스에 Scrolling header라는 그룹이 있습니다. 이 위젯 그룹을 우클릭하여 복사하고 페이지의 상단에 붙여 넣습니다. 그리고 (20, 20) 위치로 이동시킨 후, Sticky header라고 이름을 붙입니다. Sticky header를 우클릭하여 dynamic panel로 변환합니다. Dynamic panel의 이름도 Sticky header로 변경합니다.
STYLE 탭에서 Hidden에 체크합니다.
Sticky header를 고정시키기
Sticky header dynamic panel이 선택된 상태에서, PROPERTIES 탭에서 Pin to Browser를 클릭합니다.
Pin to browser window에 체크합니다. Horizontal Pin에서 Left를 선택하고, Vertical Pin에서 Top을 선택합니다. OK를 눌러 저장합니다.
Scrolling header 숨기기와 Sticky header 보이기 인터랙션 추가하기
페이지의 빈 곳을 클릭하여 Page의 인스펙터를 엽니다. PROPERTIES 탭에서 OnWindowScroll을 더블클릭하여 케이스를 추가합니다.
Case Editor에서 Add Condition 버튼을 클릭합니다. 첫 드롭다운 박스에서 value를 선택하고 두 번째 필드의 fx 버튼을 클릭합니다. Insert Variable or Function...을 클릭하고 Window 섹션에서 Window.scollY를 클릭합니다. OK를 눌러 창을 닫습니다.
그 다음 필드에서 is greater than or equals를 선택하고 그 다음은 value, 180 순으로 입력합니다. OK를 눌러 Condition Builder 창을 닫습니다.
왼쪽 화면에서 Show를 선택하고 Sticky header dynamic panel에 체크합니다.
다시 왼쪽 화면에서 Hide를 선택하고 오른쪽에서 Scrolling header 그룹에 체크합니다. OK를 눌러 저장합니다.
Sticky header 숨기기와 Scrolling header 보이기 인터랙션 추가하기
다시 PROPERTIES 탭에서 OnWindowScroll을 더블 클릭하여 두 번째 케이스를 추가합니다.
Case Editor에서 Hide를 선택하고 Sticky header에 체크합니다.
Show를 선택하고 Scrolling header에 체크합니다. OK를 눌러 저장합니다.
미리보기
Preview 버튼을 눌러 미리보기합니다.