고정 탭 스크롤 위치 이동?
본문
https://www.mobis.co.kr/kr/aboutus/aboutus.do
여기 컨텐츠 내용 보시면 왼쪽에 각 카테고리가 fixed 되어 있고
우측 내용은 각 카테고리의 내용에 맞게끔 세팅이 되어 있습니다.
마우스휠을 이용하여 각 내용에 가면 왼쪽 카테고리에 불이 들어오고,
왼쪽 카테고리를 클릭해도 그 내용으로 스크롤 이동이 됩니다.
탭메뉴로도 비슷하게 해보려하고, 스와이퍼를 사용하려 해보려 했는데도
잘 구현이 안되네요. 혹시 이것을 무엇이라고 하고 관련 데모 같은것을 볼 수 있는
사이트가 있을까요?
답변 1
가장 편하게 설명할게요.
아래소스를
http://www.mediaplayer.kr/main/bbs/html_editor.php
좌측창에 붙여넣고 결과보기 클릭한 후 마우스를 굴려보세요.
<div id=my style=position:fixed;top:10px;left:10px></div>
<div style=height:3000px></div>
<button id=you style=cursor:pointer>클릭</button>
<script>
onmousewheel = function() {
my.innerHTML = pageYOffset;
}
you.onclick = function() {
scrollTo({top:200, behavior:"smooth"});
}
</script>
1. 좌상단 숫자가 변합니다.
이 숫자 즉 pageYOffset 을 조건으로 마우스휠 이벤트에서 이프문을 걸어줍니다.
if (pageYOffset >= 0 && pageYOffset < 200) 1번만 빨간색으로, 나머지는 까만색으로
else if (pageYOffset >= 200 && pageYOffset < 400) 2번만 빨간색으로, 나머지는 까만색으로
else if (pageYOffset >= 400 && pageYOffset < 600) 3번만 빨간색으로, 나머지는 까만색으로
.
.
.
여기서 200, 400, 600 은 본인이 미리 계산을 해 놓거거나...
아니면 일반식으로 추출하려면 엘레먼트의 offsetTop 과 offsetHeight 패딩 마진등까지 배려하는 패턴을 구성하여 함수 등으로 리턴하게 만들어 놓아야 합니다.
2. 주욱 스크롤을 내리면 버튼이 하나 있습니다. 그거 클릭하면 전체가 상단 200 까지 부드럽게 올라갑니다.
이런 식으로 버튼 이벤트를 같이 구성해 주면 되겠죠.
200이란 값은 1번에서 이미 추출해 놓은 값이겠지요.
답변 감사드립니다. 단순 css만으로는 안되는거였네요.
친절한 설명 감사드립니다. 이해가 쏙쏙 되었습니다. 잘 구현해보겠습니다!
