[JS 포트폴리오 만들기] 스크롤 페이지에 맞게 메뉴버튼 자동 활성화 시키기

2022.03.24-26

---

🤔❓ 어떻게 스크롤을 하면 상단메뉴버튼이 해당 페이지에 맞게 자동으로 선택하지

각 페이지와 메뉴버튼을 연결시켜 줄 수 있는 항목을 찾아서, 페이지의 움직임이 발생할 때 메뉴버튼에도 움직임을 주면 될 것이라고 생각했다.

 

확인해보니 페이지와 메뉴는 동일한 'id'를 갖고 있다.

그렇다면 이렇게 해보면 어떨까.

 

case 1

페이지가 스크롤 되어 밑으로 내려가듯이, 선택된 상태도 옆으로 스크롤 되도록 하면 된다고 생각했다.

 

1.  선택된 메뉴버튼에 해당하는 페이지의 좌표값을 구한다.

2. 해당 좌표값이 윈도우 스크린 좌표와 일치되면 상단바 버튼을 이동시킨다.

 

근데 해보니까 아니다. 왜나면 '페이지'가 스크롤 되는거기 때문이다.

 

case2

상단메뉴버튼과 페이지의 id가 동일하니, 스크롤링해서 현재 보이는 화면의 id와 상단메뉴 id가 동일하다면 메뉴버튼을 활성화 시킨다.

그러면, 스크롤링해서 보이는 현재 화면의 id를 어떻게 찾을 것인가.

 

여기서 intersectionobserver를 알게 된다.

 

 

 

---

😃❗

1) 모든 섹션의 요소들과 메뉴 아이템들을 가져온다.

(1) 배열을 이용해서 모든 섹션의 요소들을 가져온다.

//1. 배열을 이요하여 모든 섹션의 요소를 가져온다.
const sectionIds = ['#home', '#about', '#skills', '#work', '#testimonials','#contacts'];

 

(2) 섹션 id를 돌면서 섹션을 DOM요소로 만든다. (map사용)

//sectionIds를 돌면서 queryselector를 통해 id가 있는 section을 받아와 dom요소로 만든다.
//map은 dom요소로 만들어주는 기능을 한다.(큰 개념으로 만들어 주는 역할인가.)

const sections = sectionIds.map(id => document.querySelector(id));

console.log(sections);
// 0: section#home
// 1: section#about.section.section__container
// 2: section#skills.section
// 3: section#work.section
// 4: section#testimonials.section
// 5: section#contacts.section

섹션 Id를 돌면서 DOM요소로 만들어주는데 이때 map을 이용한다. 뭐랄까, 작은개념을 큰 개념으로 만들어주는 역할을 하는 듯 하다.

 

 

(3) 섹션 id를 돌면서 상단바 아이템을 DOM요소로 만든다. (map사용)

//sectionIds를 돌면서 queryselector를 통해 navitem을 받아온다.
//sectionid에 해당하는 navitem을 불러오기 위해 navitem 요소들을 불러온다.
const navItems = sectionIds.map(id => document.querySelector(`[data-link="${id}"]`));

console.log(navItems);
// 0: li.navbar__menu__item.active
// 1: li.navbar__menu__item
// 2: li.navbar__menu__item
// 3: li.navbar__menu__item
// 4: li.navbar__menu__item
// 5: li.navbar__menu__item

2번과 똑같이 섹션id를 돌면서 상단바의 DOM요소를 만든다.

이때, 상단바에는 id로 들어가 있는게 아니라 data-link에 값이 들어가 있기 때문에 `[data-link="${id}"]`를 이용하여 아이디값을 불러와주면 된다.

 

 

2) intersectionObserver를 이용해서 모든 섹션들을 관찰한다.

(1) 섹션을 관찰할 observer의 기본세팅을 만든다.

// observer옵션 설정
const observerOption = {
  root: null,
  rootMargin: '0px',
  threshold: 0.3,
}

//2) 이 객체에는 배열을 돌면서 내용을 반환한다.
const observerCallback = (entries, observer) => {
  entries.forEach(entry => {
  };
};

//1) observer라는 객체를 만든다.(관찰자를 만든다.)
const observer = new IntersectionObserver(observerCallback, observerOption);

(1) observer라는 객체를 만든다. (관찰자를 만든다)

(2) 이 객체에는 entries라는 배열이 들어와서 내용을 돌면서 관찰하고 싶은 내용을 반환한다.

 

그렇다면 어떤 내용을 관찰하고 싶을까?

 

지금 내가 원하는 것은 섹션과 상단바 아이템을 연결시켜주는 '무언가'를 해야한다.

그렇다면 섹션이 스크롤링 될 때 해당 섹션의 인덱스를 가져와 이를 상단바의 인덱스와 연결시키면 되지 않을까.

 

 

어떻게 현재 움직이는 섹션과 상단바 인겟르를 연결시킬까.

이를 위해 observeCallback함수에 아래 내용을 넣는다.

const observerCallback = (entries, observer) => {
  entries.forEach(entry => {
  
	if(!entry.isIntersecting && entry.intersectionRatio > 0) {
      
      //entry(target)와 일치하는 인덱스를 가져온다.
      const index = sectionIds.indexOf(`#${entry.target.id}`);
      console.log(index, entry.target.id);

      //위롤 스크롤링 될 때 (즉, 밑으로 내릴 때) = y좌표가 -일 경우
      //y좌표가 -일 경우에는 index+1이 된 navitem요소를 보여주고
      //y좌표가 +일 경우에는 index-1이 된 navitem요소를 보여준다.
      
      //섹션의 id의 인덱스를 가져온다.
      let selectedIndex;
      if(entry.boundingClientRect.y < 0) {
        selectedIndex = index + 1;
      } else {
        selectedIndex = index - 1;
      }
   }

 

움직이는 논리를 짜 보자면,

현재는 스크롤을 위로 굴리면서 페이지가 '아래로 내려가는 상태'인데,

1번 섹션이 위로 나가면서 2번 섹션이 보여지면 메뉴아이템은 2번섹션을 가리키면 된다.

즉, 1번 섹션의 y좌표값이 (-)가 되면(윈도우를 기준으로 했을 때) 2번 아이템의 인덱스를 보여주면 된다.

 

if(!entry.isIntersecting && entry.intersectionRatio > 0)

일단, 페이지가 아래로 내려가는지, 위로 올라오는지를 알기 위해서 intersectionObserver의 isIntersecting이라는 기능을 이용한다.

페이지가 '들어오는 상태'이면 true고 '나가는 상태'이면 false를 반환한다.

1번 섹션이 나가는 상태이면 상태가 false이므로 if(!entry.isIntersecting) 라고 지정한다.

 

const index = sectionIds.indexOf(`#${entry.target.id}`);

현재 나가고 있는 섹션을 타겟으로 해서 해당 섹션의 id의 인덱스를 가져온다.

 

let selectedIndex;

if(entry.boundingClientRect.y < 0) {
selectedIndex = index + 1;
} else {
selectedIndex = index - 1;
};

나가고 있는 섹션의 y좌표가 (-)이면 현재 인덱스에서 1을 더하고, (+)이면 1을 빼준다.

 

 

3) 위에서 구한 섹션의 인덱스와 상단바 아이템의 인덱스를 연결시킨다

let selectedNavItem = navItems[0];
function selectNavItem(selected) {
  //섹션 id의 인덱스와 일치하는 Navitem을 가져온다.
  //함수 밖에서 selctednavitem이란 요소를 기억했다가, 지워주고, 다시 호출해서, 더해준다.
  selectedNavItem.classList.remove('active');
  selectedNavItem = selected;
  selectedNavItem.classList.add('active');
};

상단바 아이템의 인덱스가 선택되면 기존에 존재하던 상단바 아이템요소에서 active를 제거하고,

새로 선택한 아이템요소에 active를 추가해준다.

 

 

(2) 기본세팅이 되었다면 어떤 항목을 관찰할지 지정해준다.

//3) 어떤 배열을 돌면서 어떤 내용을 반환할지 지정해준 것이다. (observer야 관찰해줘)
sections.forEach(section => observer.observe(section));

(1)에서 만든 섹션 DOM요소를 돌면서, 각 섹션을 관찰한다.

 

그렇다면 이제 어떤 내용을 관찰해줄지 생각해보자.

이건 다음시간에.

 

---

eunne's github: https://github.com/eunne/Project_Portfolio.git