parallaxEffect01 - 메뉴 이동

개요

오른쪽 상단에 메뉴가 있는데, 메뉴를 클릭하면 자연스럽게(smooth하게) 이동하도록 하였다

 

HTML 구성

    <nav id="parallax__nav">
        <ul>
            <li class="active"><a href="#section1">s1</a></li>
            <li><a href="#section2">s2</a></li>
            <li><a href="#section3">s3</a></li>
            <li><a href="#section4">s4</a></li>
            <li><a href="#section5">s5</a></li>
            <li><a href="#section6">s6</a></li>
            <li><a href="#section7">s7</a></li>
            <li><a href="#section8">s8</a></li>
            <li><a href="#section9">s9</a></li>
        </ul>
    </nav>

각각을 섹션 순으로 나누었다.

active가 붙으면 css효과를 주었다 (생략)

JS 구성 - 1

document.querySelectorAll("#parallax__nav li a").forEach(li => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior:"smooth"
        })
    })
})

목표

a링크를 통해 바로 이동하는 것을 자연스럽게 스크롤 되며 이동하는 걸로 바꾸어 준다

 

주의점

사실 바꾸어주는 게 아니라 앞에 것을 없애고 뒤에 것을 생성한다

즉, 바로 이동하는 것을 preventDafault()로 없애주고 자연스럽게 스크롤 되게 한다()

 

그외

1. li.getAttribute("href") -> getAttribute란 특정 값을 가져오는 것이다

2. scrollIntoView는 behavior: "smooth"밖에 없다 ㅋㅋ

 

JS 구성 - 2

document.querySelectorAll(".content__item").forEach((element,index) => {
    if(scrollTop >= element.offsetTop - 2 ){
        document.querySelectorAll("#parallax__nav ul li").forEach(li => {
            li.classList.remove("active");
        });
    document.querySelector(`#parallax__nav ul li:nth-child(${index + 1})`).classList.add("active");
    }
})

목표

섹션 스크롤 탑 값에 도달하면 해당 메뉴의 클래스를 active로 바꾸어 주고 기존에 있던 active은 제거해준다

하지만 너무 딱맞으니 모니터가 작은 나의 노트북에서는 조금의 어긋남이 보였고 

그래서 element.offsetTop - 2를 주었다

 

링크 

https://sungilryuu.github.io/webs_class/javascript/effect/parallaxEffect01.html