자바스크립트 10일차 - 헤더 영역, 마우스휠 조절시 영역 표기, scrollTop, animate를 통한 페이지 위치 옮기기

스크롤을 올릴땐 헤더 영역이 나타났다가 스크롤을 내리면 헤더영역이 사라지는 그런 사이트들을 보신적이 있을꺼에요;

 

스크롤을 내리면 아래처럼 메뉴가 사라지고.

스크롤을 올리면 아래와 같이 메뉴(머릿말)이 나타나도록 만들어보겠습니다. 

 

먼저 헤더영역을 만들어주시고요. ㅎㅎ 

<header>header</header>

헤더에 스타일을 줍시다. 

백그라운드, 글씨색, 텍스트 위치 등등 조절해주시고요.

중요한점이 헤더의 위치는 고정으로 해야됩니다. (이것만 설정하면 휠을 올렸다 내렸다 하더라도 위치를 고정하고 있답니다.)

그리고 현재는 보이지 않도록 하기 위해 translateY 값을 -100%로 줍니다. 

이상태를 주면 헤더는 보이는 페이지 위쪽에 우리눈에 안보이는 곳에 위치하게 됩니다. 

그리고 transition 값을 0.5s줍니다. 0.5의 속도로 움직이게 됩니다. 

<style>

header{

background-color: black;

color: white;

text-align: center;

padding: 20px 0;

position: fixed; left:0; top:0;

width:100%;

transform: translateY(-100%);

transition:0.5s;

}

header.active{transform: translateY(0%);}

</style>

 

그리고 당연히 active클래스를 주는 경우 transform값을 원래대로 0%로 주면 되겠죠?

 

스크립트를 만들어보겠습니다. 

간단해요 

먼저 y=0, dy=0 값으로 선언해줍니다. 

dy 의 경우 이동한 스칼라값이 될꺼고요, y는 스크롤의 현재위치가 됩니다. 

자 여기서 많이들 해깔리실텐데요

y값과 dy값을 통해서 내가 마우스를 내리고 있는지 올리고 있는지 체크를 하는 시스템을 만드는게목적이에요.

아래와 같이 dy=y; 값을 넣어주시고요.

if문을 통해서 y 보다 dy가 작을경우 이벤트를 발생시키면 됩니다.

 

<script>

let y=0, dy=0;

$(window).scroll(function(e){

y = $(this).scrollTop();

if( y > dy) {

//true

$('header').removeClass('active')

}

else{

 

$('header').addClass('active')

}

dy = y;

})

 

</script>

 

아래 그림을 보시면 더 이해하기 쉬울꺼같네요 

맨 위는 scrollTop =0 ; 부분이고요.

아래는 5000px입니다. 

스크롤을 내릴수록 Y에 들어오는 scrollTop 의 숫자는 커지겠죠?

그리고 상대적으로 dy 의 값은 스크롤 내리기 전의 Y값이기 때문에 작겠죠?

반대의 경우는 DY값이 Y값보다 커질껍니다. 

이렇게 스크롤을 내릴경우와 올릴경우를 구분해줄수 있습니다. 

 

그다음은 쉽죠.

스크롤을 내릴경우 active클래스를 없애주고,

반대인 경우 active 클래스를 넣어주면 끝입니다. 

생각보다 어렵지 않았습니다. 

dy와 y와의 관계를 잘 알수있으면 해결되는 부분입니다. 

 

 

자 이번에는 다른 이벤트를 해볼 차례에요.

아래의 목표를 가지고 구현한번 해보도록 하겠습니다. 

<!-- 스크롤 이벤트 발생

콘텐츠 위치값을 활용한 방법(이미지)

스크롤 방향을 할용한 방법 (header)

클릭 이벤트 발생

원하는 컨텐츠 까지 스크롤 이동 -->

 

자 조금 꾸며주기 위해서 header와 main에 컨텐츠를 넣어보겠습니다. 

<header class= 'active'>

<a>Con01</a>

<a>Con02</a>

<a>Con03</a>

<a>Con04</a>

<a>Con05</a>

</header>

<main style="height:5000px">

<div> Content 01</div>

<div> Content 02</div>

<div> Content 03</div>

<div> Content 04</div>

<div> Content 05</div>

</main>

여기에 조금더 보기 좋게 css도 넣어봅시다. 

header a{ margin:0 30px;}

main div{

height:100vh;

display: flex;

align-items:center;

justify-content: center;

font-size:5rem;

}

 

그럼 아래와 같이 나오겠죠?

 

각 컨텐츠 01~05까지 생성될꺼에요.

이제 헤더의 각 버튼을 순서대로 클릭할때 각 숫자값만큼 컨텐츠로 이동하면 되겠죠?

스크립트를 통해서 해당 이벤트를 발생시켜봅시다. 

 

자. elMenu 상수를 설정한 후 header의 a태그들을 잡아줍시다.

그리고 나서 on이벤트를 통해서 클릭이벤트를 발생시켰습니다. 

여기서 배운거 다 출동 시켜야되겠죠.

idx 를 통해서 index 값을 받아옵니다. 여기서 this는 클릭한 a태그가 되겠죠?

offset도 main div의 offset의 top() 값을 가져올꺼에요 근데 어떤 main의 div냐!?

내가 클릭한 a태그와 순서가 같은 컨텐츠를 선택해줄꺼에요 

선택하는 방법은 우리 배웠죠? eq(숫자 )

const elMenu = $('header > a');

elMenu.on('click', function(){

let idx = $(this).index();

let offset = $('main div').eq(idx).offset().top;

console.log(offset)

$(window).scrollTop(offset);

그리고 나서 scrollTop을 통해서 해당 위치로 옮겨주면 끝입니다. !!

 

이제 header의 버튼을 누르면 해당 컨텐츠로 이동하도록 구현완료입니다.

 

여기서 추가로 , 조금 더 자연스럽게 이동시키고 싶다 라고 한다면 아래의 명령어를 쓰시면 됩니다.!! 

주의할 점은 window가 아니라 html로 사용하면 됩니다. 

$('html').animate({scrollTop: offset});