Contact Section & scrollTo 구현_20210605_Day11

진행 사항

- Contact Section 구현

- Nav 버튼 클릭 scrollTo 로직 구현

- 전체적으로 CSS re-sizing

 

Contact Section

 

ScrollTo

import React from "react";
import styled from "styled-components";
import theme from "../common/style/themes/default";
import MainLogo from "../assets/images/logo.png";
import GitLogo from "../assets/images/github.png";
import BlogLogo from "../assets/images/tistory.svg";

function MainNav() {
  //스크롤 발생시 위치값에 따라 네비 버튼 색 변경
  document.addEventListener("scroll", () => {
    const about = document.getElementsByClassName("about")[0].offsetTop;
    const works = document.getElementsByClassName("works")[0].offsetTop;
    const contact = document.getElementsByClassName("contact")[0].offsetTop;
    const navBtns = document.querySelectorAll(".navBtn");
    const btnAbout = document.getElementsByClassName("navAbout");
    const btnWorks = document.getElementsByClassName("navWorks");
    const btnContact = document.getElementsByClassName("navContact");

    navBtns.forEach((btn) => {
      btn.style.color = "black";
    });
    let currentScrollValue = document.documentElement.scrollTop;

    if (about <= currentScrollValue && currentScrollValue < works) {
      btnAbout[0].style.color = theme.palette.green;
    } else if (works <= currentScrollValue && currentScrollValue < contact) {
      btnWorks[0].style.color = theme.palette.green;
    } else if (contact <= currentScrollValue) {
      btnContact[0].style.color = theme.palette.green;
    }
  });

  const handleScroll = (e) => {
    //네비 버튼 클릭시 해당 위치로 scroll 위치 이동
    const target = e.target.innerText;
    const home = document.getElementsByClassName("home")[0].offsetTop;
    const about = document.getElementsByClassName("about")[0].offsetTop;
    const works = document.getElementsByClassName("works")[0].offsetTop;
    const contact = document.getElementsByClassName("contact")[0].offsetTop;

    if (target === "About") {
      window.scrollTo({ top: about, behavior: "smooth" });
    } else if (target === "Works") {
      window.scrollTo({ top: works, behavior: "smooth" });
    } else if (target === "Contact") {
      window.scrollTo({ top: contact, behavior: "smooth" });
    } else {
      window.scrollTo({ top: home, behavior: "smooth" });
    }
  };

  return (
    <Main>
      <NavList>
        <List>
          <Scroll className="navBtn navAbout" onClick={handleScroll}>
            About
          </Scroll>
        </List>
        <List>
          <Scroll className="navBtn navWorks" onClick={handleScroll}>
            Works
          </Scroll>
        </List>
        <List>
          <Scroll className="navBtn navContact" onClick={handleScroll}>
            Contact
          </Scroll>
        </List>
        <List>
          <Scroll>
            <LogoImg
              className="navBtn navHome"
              src={MainLogo}
              onClick={handleScroll}
            />
          </Scroll>
        </List>
        <List>
          <Scroll>
            <SocialLink href="https://github.com/JayKim88" target="_blank">
              <SocialImg src={GitLogo} />
            </SocialLink>
          </Scroll>
        </List>
        <List>
          <Scroll>
            <SocialLink
              href="https://nomadkim880901.tistory.com/"
              target="_blank"
            >
              <SocialImg src={BlogLogo} />
            </SocialLink>
          </Scroll>
        </List>
      </NavList>
    </Main>
  );
}

...생략...

export default MainNav;

더 간단한 방법이 있을 것이다.

도움받은 사이트

- 스크롤 이벤트: https://www.everdevel.com/JavaScript/scroll-event/