이번에는 마우스로 스크롤을 할 때 상단의 메뉴바를 고정시키고 메뉴바의 배경 색상을 바꾸는 작업이야.
홈페이지를 보면서 화면 아래쪽을 보기 위해 스크롤해 내려가면 상단 메뉴바가 따라 올라가서 감춰지잖아?
그럼 한참 내려 갔다가 다른 메뉴를 선택하려면 또 한참 올라가서 선택해야 해.
또 디자인 목적상 처음에는 상단메뉴를 투명하게 처리했는데 아래로 내려가면 불투명으로 해야 할 때도 있어.
이번에는 이 문제를 해결해 보자구..
이번 학습은 아주 쉬워.
사실 그냥 마칠까 하다 여기까지는 설명해야 요즘 유행하는 홈페이지의 대문이 완성될 것 같아서 마저 설명할께..
■ 메뉴 고정
메뉴 위치 고정은 사실 자바스크립트의 영역이 아니야.
css 스타일의 담당이야.
css 의 position:fixed 와 top, left 가 바로 이 역할을 하는 속성이야.
아래 메뉴를 담당하는 소스의 css 스타일을 눈여겨 봐.
.navbar { /* 상단 메인메뉴 */
overflow: hidden;
background-color: black;
position: fixed;
top: 0;
width: 100%;
}
.sidenav { /* 좌측 사이드 메뉴 */
width: 200px;
position: fixed;
z-index: 1;
top: 100px;
left: 10px;
background: #eee;
overflow-x: hidden;
}
상단 주메뉴(.navbar)의 position:fixed; 로 고정했고 위치는 top:0; 으로 맨 위에 고정했어.
또한 사이드메뉴(.sidenav) 역시 position:fixed 로 고정하고 위치는 top:100px; left:10px;로 위에서 100px, 좌측 10px 지점이 고정을 했어.
그러므로 이 두개의 메뉴는 스크롤이 되어도 항상 제자리에 있게 돼.
이 position:fixed 를 이용한 데모와 소스는 아래 링크에서 확인해 봐.
http://yogibbs.kr/jsDemo/fixed-menu.html
그런데 어떤 홈페이지를 보면 스크롤하면 따라 올라가다 어느 지점에 가면 딱 멈추는 것도 보았지?
그건 어떻게 했을까?
position 의 값에 sticky 라는 값을 사용하면 돼.
이밖에도 각 div 나 이미지 같은 요소의 위치를 정하는 position 의 값에는 static, absolute, relative, fixed, sticky 가 있어.
특별히 position 값을 지정하지 않으면 기본값은 static 이야.
웹디자인을 원하는 학생들은 이 position 에 대해서 잘 이해하고 있는 것이 꼭 필요해.
인터넷에서 검색하면 무수히 많은 설명과 예제들이 있으니 꼭 알고 넘어 가도록 해.
■ 스크롤 이벤트
이번에는 마우스로 스크롤을 할때 어떤 작동을 하는 방법을 알아 볼거야.
연습으로 일정 크기 이상 스크롤을 하면 상단 메뉴의 배경색을 바꾸어 볼께.
이미 위 링크에 접속해 테스트해 본 분들은 보았겠지만 스크롤을 조금 올리면 상단 메뉴바의 색상이 검정색에서 녹색으로 변하는 것을 보았을 거야.
이것은 자바스크립트의 아래 코드가 담당한 거야.
window.onscroll = function() {
var menu = document.querySelector('.navbar');
// 스크롤이 100px 이상이면..
if (document.documentElement.scrollTop > 100) {
menu.style.backgroundColor = 'green';
} else { // 100px 이하이면 원래대로..
menu.style.backgroundColor = '';
}
}
뭐 이젠 코드 대충 읽어도 척 감이 오지?
window.onscroll 은 브라우저에서 스크롤이 발생할 때 발생하는 이벤트야.
즉 여러분이 화면에서 스크롤을 하면 여기에 걸려서 함수 안의 코드가 처리 되는 거야.
document.documentElement.scrollTop 은 현재 문선 최상단 기준으로 스크롤이 얼마나 되었는지를 반환해.
이것이 100px 이 넘으면 아래 명령대로 navbar의 배경(backgroundColor) 스타일을 green 으로 바꾸라고 했어.
그럼 이제 여기에 지난 번 공부한 커로셀(회전목마)까지 추가해서 한 번 볼까?
아마 그럴듯한 대문이 되지 않을까?
여기 그 결과가 있어..
http://yogibbs.kr/jsDemo/fixMenuCarousel.html
이 최종 결과에서는 상단 메뉴에 배경색을 주지 않아 기본은 아래에 있던 배경그림이 그대로 배경이 깔리도록 했어.
(요즘 유행이어서 그렇게 해 보았어)
그리고 스크롤을 하면 그때 배경색을 녹색으로 바꾸도록 했어.
이 모든 소스는 브라우저에서 Ctrl-U 로 확인할 수 있다는 점 누누하게 이야기 했지?
꼭 확인해서 어떻게 만들었는지 알고 넘어가기를 바래.