🎯 Achievement Goals

Javascript
scroll

👉 Solo Day 3일차

어제는 기본적인 구조를 만들고 오늘은 자바스크립트를 이용해서 몇가지 기능을 구현해보았다.

먼저 스크롤을 내릴 때 상단 네비게이션이 생기는 것과 스크롤을 내릴수록 위에 컨텐츠는 조금씩 흐려지는 부분, 그리고 네비게이션 목록을 눌렀을 때 그 위치로 이동하는 것을 구현해 보았다.

👉 오늘 배운 것

getBoundClientRect()

const navbar = document.querySelector("#navbar");
//네비게이션 바 높이 찾기
const navbarHeight = navbar.getBoundingClientRect().height;

document.addEventListener('scroll', () => {
    console.log(window.scrollY)
    if (window.scrollY > navbarHeight) {
        navbar.classList.add('navbar--dark');
    }
    else {
        navbar.classList.remove('navbar--dark');
    }
});

이렇게 네비게이션 바의 위치를 구하고 현재 내가 내리는 스크롤이 네비게이션 바의 높이 이상을 가면, 즉 스크롤을 내릴 때 classList를 해주었다.

B: block, E: element, M: modifier의 약자로 주로 이름을 쉽게 구분 짓기 위해서 사용된다.

프로젝트를 할 때는 코드가 굉장히 복잡해지기 때문에 처음 이름을 지을 때 막 짓게 되면 나중에 정말 많이 힘들 것이라는 이야기를 듣고 BEM을 연습하기로 했다.

따로 해볼 기회가 없었기 때문에 이번 기회에 연습을 해보았다.

dataset

그다음은 네비게이션 바의 목록중에서 선택해서 누르면 그 목록의 위치로 가는 기능을 구현하였다.

// html
<li class="navbar__menu__item active" data-link="#home">Home</li>

// js
const navbarMenu = document.querySelector('.navbar__menu');
navbarMenu.addEventListener('click', (event) => {
	//dataset.link 를 이용해서 클릭한 데이터가 무엇인지 찾는다.
    console.log(event.target.dataset.link);
    const target = event.target;
    const link = target.dataset.link;
	// 데이터 이외의 것들을 클릭했을 때는 아무일도 일어나지 않게 한다.
    if (link === null) {
        return;
    }

    scrollIntoView(link);
});

// 화면이 넘어갈 때, 자연스럽게 넘어가도록 해준다.
// 'smooth'가 자연스럽게 넘어가도록 해주는 기능이고, 다른 기능들도 많았다.
function scrollIntoView(selector) {
    const scrollTo = document.querySelector(selector);
    scrollTo.scrollIntoView({behavior: 'smooth'});
}

opacity

그 다음은 화면을 내렸을 때, 자연스럽게 상단의 컨텐츠는 흐려지는 기능을 구현하였다.

// scrolls down
const home = document.querySelector('.home__container');
// 홈의 높이를 구한다.
const homeHeight = home.getBoundingClientRect().height;
document.addEventListener('scroll', () => {
	// 불투명도 1에서 스크롤이 내려갈 때마다 홈의 높이를 나눴을 때의 몫을 빼준다.
	// 그러면 스크롤이 내려가면서 1에서 0으로 가까워지는데, 이때 천천히 흐려진다.
	// 그리고 홈의 높이를 벗어나면 음수가 된다.
    home.style.opacity = 1 - window.scrollY / homeHeight;
});

🙌 느낀점

오늘은 한 번도 사용하지 않았던 자바스크립트 기능을 구현해보았다.

부트캠프에서는 따로 알려주지 않는 내용이라 내가 스스로 찾아보고 공부하지 않으면 알 수 없는 내용들이었다.

부트캠프도 좋지만 시간이 날 때마다 새로운 내용도 자주 찾아봐야겠다.

👊 내일의 TIW(today I Will)

Promise, Async

← Previous Post Next Post →

Solo Day - 3일차

📅 TIL #47