문제 1. 스크롤바 100px 내리면 로고 폰트사이즈 작게 만들기
그런 재밌는 애니메이션을 만들어봅시다.
.navbar {
position : fixed;
width : 100%;
z-index : 5
}
.navbar-brand {
font-size : 30px;
transition : all 1s;
}
일단 상단메뉴는 상단고정하고
로고 폰트사이즈를 키운 채로 시작합시다.
그리고 스크롤바를 100px 정도 내리면 폰트사이즈를 줄여봅시다.
그럼 스크롤바를 얼마나 내렸는지 알 수 있어야겠군요
스크롤 이벤트리스너
window.addEventListener('scroll', function(){
console.log('안녕')
});
스크롤바를 조작하면 scroll 이벤트가 발생합니다.
그래서 scroll 이벤트리스너를 전체 페이지에 달면
전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있습니다.
진짜 스크롤바 만질 때 마다 '안녕' 출력되나 봅시다.
참고로 window는 그냥 전체 페이지를 의미합니다.
실은 document도 전체 페이지입니다. window가 약간 더 큰 개념인데 scroll 이벤트리스너는 관습적으로 window에 붙임
스크롤 관련 유용한 기능들
스크롤 이벤트리스너안에서 쓰는 유용한 기능들이 몇개 있습니다.
window.addEventListener('scroll', function(){
console.log( window.scrollY )
});
window.scrollY 사용하면 현재 페이지를 얼마나 위에서 부터 스크롤했는지 px 단위로 알려줍니다.
매우유용
window.scrollX 는 가로로 얼마나 스크롤했는지 알려줍니다. (가로 스크롤바가 있으면)
window.scrollTo(0, 100)
window.scrollTo(x, y) 실행하면 강제로 스크롤바를 움직일 수 있습니다.
위 코드는 위에서부터 100px 위치로 스크롤해줍니다.
window.scrollBy(0, 100)
window.scrollBy(x, y) 실행하면 현재 위치에서부터 스크롤해줍니다.
위 코드는 현재 위치에서부터 +100px 만큼 스크롤해줍니다.
근데 원래 저거 실행하면 스크롤 위치가 순간이동해야되는데
bootstrap을 설치했을 경우 이상하게 천천히 이동할 수 있습니다.
그게 싫으면 :root { scroll-behavior : auto } 이걸 css 파일 맨 위에 추가합시다.
$(window).on('scroll', function(){
$(window).scrollTop();
})
jQuery 버전은 더 짧습니다.
$(window).scrollTop() 이거 쓰면 아까처럼 현재 페이지 스크롤 양을 알려줍니다.
근데 간편한건 $(window).scrollTop(100) 이러면 페이지 강제이동도 해줌
필요한건 다 알려줬으니 오늘 숙제로 문제1 기능 완성해오면 됩니다.
문제 2. 박스 끝까지 스크롤시 알림띄우기
회원약관인데 이 박스를 끝까지 스크롤하면 alert() 이런걸 띄우고 싶은겁니다.
그럼 코드를 어떻게 짜야할까요
div 스크롤바 내린 양 == div 실제높이일 경우 alert 띄워주세요~
이렇게 짜면 될듯요? 근데
"페이지 스크롤바 내린 양" 구하는건 배웠는데
"div 박스 스크롤바 내린 양" 구하는 법은 안배웠습니다.
div 박스의 스크롤바 내린 양은
박스를 셀렉터로 찾고 .scrollTop 붙이면 스크롤바를 위에서 부터 얼마나 내렸는지 알려줍니다.
$('.lorem').on('scroll', function(){
var 스크롤양 = document.querySelector('.lorem').scrollTop;
console.log(스크롤양);
});
콘솔창에 진짜 출력되는군요.
실은 현재 페이지 스크롤양도 .scrollTop으로 구할 수 있습니다. html 태그 찾아서 .scrollTop 붙이면 됩니다.
div 박스 높이 구하는 법
스크롤바가 생긴 박스의 경우 실제 높이같은게 궁금할 수 있습니다.
박스에 스타일로 넣은 height : 100px 이거 말고 스크롤가능한 실제높이 말입니다.
그럴 땐 셀렉터로 찾아서 .scrollHeight 붙이면 나옵니다.
$('.lorem').on('scroll', function(){
var 스크롤양 = document.querySelector('.lorem').scrollTop;
var 실제높이 = document.querySelector('.lorem').scrollHeight;
console.log(스크롤양, 실제높이);
});
콘솔창에 진짜 출력되는군요.
참고로 박스가 화면에 보이는 부분 높이는 .clientHeight 하면 나옵니다.
document.querySelector('.lorem').scrollHeight; 해보셈
이제 아까 짜려던 코드를 봅시다.
div 스크롤바 내린 양 == div 실제높이일 경우 alert 띄워주세요~
▲ 뭔가 이상한데요
스크롤바를 끝까지 내려도
스크롤바 내린 양은 188.x
div 실제높이는 288이 나옵니다.
같다고 비교하면 뭔가 안될 것 같군요.
▲ 왜냐면 스크롤바 내린 양은 진짜 스크롤바 내린 양일 뿐이라 그렇습니다.
거기에 박스가 보이는 높이는 포함안함
div 스크롤바 내린 양 + div가 화면에 보이는 높이 == div 실제높이일 경우 alert 띄워주세요~
라고 코드짜면 될듯 합니다.
하지만
스크롤 내린 양은 정수단위로 나오지 않고
OS 마다 부정확해서 여유를 두고 비교하는게 좋습니다.
그래서 끝까지 스크롤했냐~ 체크하는 것 보다
끝에서 10px 정도 남기고 스크롤했냐~ 라고 체크해봅시다.
숙제 완료!!
