[JavaScript / jQuery] Scroll 이벤트로 재미있는 기능 만들기

💡 실습 포인트!

• 오늘은 스크롤 기능을 어떤 식으로 활용하는지에 대해 공부했다.
• 확실히 그냥 문법만 배우는 것보다 직접 구글링하며 이것저것 기능을 넣어 페이지를 만드는 게 도움이 되는 것 같다.
• 수업에서는 간단히 "이런 것도 해보세요~" 라며 숙제를 내주시지만.. 나란 사람은 또 디테일에 집착했다.
• 예를 들면, 메인 화면이 아래쪽으로 어느정도 스크롤되면 로고가 커지고, 다시 스크롤을 올리면 로고가 원래대로 돌아오는 기능을 만들었다.
• 근데 그렇게 되면 기존의 css 중 서브메뉴리스트, 이벤트 배너, 메인화면 상단 사진 이런 것들의 위치가 다 조금씩 틀어지더라.. 그래서 이것들의 위치와 겹쳐지는 부분들 중 어떤 것을 위쪽에 두고 어떤 것을 아래쪽에 둘지를 조정하고 그것들을 JavaScript 로 구현하느라 시간이 좀 오래 걸렸다.

---

💜 메인 화면

• 구현하고자 한 것은, 스크롤을 하면 상단 Navbar 가 고정되고, 어느 정도 아래쪽으로 스크롤되면 로고가 조금 커졌다가 다시 스크롤을 올리면 로고가 원래대로 돌아오는 것이었다. 그리고 그 과정에 애니메이션 효과도 조금!
• 그리고 이 기능을 넣으면서 부수적으로 서브메뉴리스트, 이벤트 배너, 메인화면 상단 사진의 위치와 겹쳤을 때 보이는 순서 등을 수정해주었다.

---

🤍 CSS

.navbar {
  min-width: 500px;
  position: fixed;
  width: 100%;
  z-index: 5;
}

#logo {
  color: rgb(112, 74, 25);
  font-weight: bold;
  font-size: 25px;
  flex-grow: 0.95;
  transition: all 0.5s;
}

.list-group {
  position: fixed;
  width: 100%;
  margin-top: 100px;
  z-index: 3;
  display: none;
  transition: margin-top 0.5s;
}

.alert {
  margin-top: 100px;
  position: fixed;
  width: 100%;
  z-index: 1;
  transition: margin-top 0.5s;
}

• 상단 Navbar 에 position: fixed 를 사용하여 고정시키면서 서브메뉴리스트, 이벤트 배너, 메인화면 상단 사진의 위치들이 틀어져서, 이렇게 틀어지는 요소들에도 똑같이 position: fixed 와 width: 100% 를 넣어주었다.
• 이제 원하는 크기로 모두 상단 고정이 되었는데 이번에는 요소들이 서로 겹쳐지면서 문제가 발생했다.
• 그래서 z-index를 사용하여 이벤트 배너가 제일 뒤에 배치되고, 그 위에 서브메뉴리스트, 그 위에 Navbar 가 위치하도록 해주었다.
• 그리고 이 요소들이 변하는 게 어우러지도록 transition 속성을 넣어주었다. 보통은 해당 태그의 모든 요소(all)에 transition 을 부여하는데 그렇게 하니 태그에 해당하는 부분들의 움직임이 좀 이상해서 margin-top 요소에 넣어보았다. (좀 나아지긴 했는데 margin-top 에 transition 속성이 부여 가능한 게 맞는지는 모르겠다...)

---

🤍 JavaScript

$(window).on('scroll', function(){
    if (window.scrollY > 100){
        $('#logo').css('font-size', '30px');
        $('.list-group').css('margin-top', '115px');
        $('.alert').css('margin-top', '115px');
    } else {
        $('#logo').css('font-size', '25px');
        $('.list-group').css('margin-top', '100px');
        $('.alert').css('margin-top', '100px');
    }
})

• 메인화면에서 Y축(상단부터 0으로 시작) 기준으로 100 이상 스크롤이 내려갔을 때 로고의 글씨 크기가 더 커지게 했다.
• 로고 글씨가 커지면서 Navbar의 높이도 변하므로 서브메뉴리스트와 이벤트 배너의 위치가 조금씩 아래로 내려가게 margin-top 값을 좀 더 크게 잡아주었다.
• 그리고 100 보다 작아지는 경우 바뀐 부분들이 원래대로 돌아올 수 있도록 해주었다.

---

💜 회원가입 화면

• 수업에서는 기존 메인페이지의 하단에 이 회원가입 동의하는 양식 부분을 만드셨는데, 나는 아직 어떻게 하는지 잘 모르지만 다른 홈페이지들처럼 회원가입 버튼을 누르면 팝업형태로 회원가입할 수 있게 뜨든지 해당 페이지로 이동해서 회원가입을 할 수 있든지.. 여튼 그런 식으로 진행하고 싶었다.
• 그래서 a 태그를 만들어서 클릭하면 signup.html 로 페이지를 넘겨주었다. signup.html 파일은 일단 수업을 들어야하기에 대강 만들었다.
• 수정을 진행할수록 JavaScript, CSS 파일에 들어가야 하는 내용이 많아졌는데, 어차피 메인화면이 아니라 회원가입화면이라 기존의 JavaScript, CSS 파일에서 회원가입에 필요한 부분만 좀 분리했다. (애초에 컴포넌트화해서 사용하면 훨씬 편하지 않을까 생각이 든다.)
• 일단 메인화면과 큰 이질감이 없었으면 해서 Navbar 를 넣어주었는데 회원가입하는 부분이라 기존 Navbar 의 로그인 버튼이나 메뉴 버튼은 필요없을 것 같아서 이 부분만 뺐다. Dark Mode 전환하는 건 그대로 두고 JavaScript 를 좀 수정한 후 기능이 제대로 동작하는지 확인했다.
• 이제 가짜(...) 회원가입 동의서를 거의 끝까지 읽으면 "내용을 모두 확인했습니다." 라는 문구가 뜨도록 해주었다.
• 여기서 또 스크롤 이벤트가 여러 번 발생하는 일이 생겼는데, 구글링을 통해서 이벤트 발생 후에는 삭제하는 방법을 이용해서 이벤트가 딱 1번만 발생하도록 수정해주었다.

---

🤍 CSS

#sign-up-content {
  width: 500px;
  height: 600px;
  font-size: 16px;
  margin: 100px auto;
  padding: 20px 30px;
  border: 4px double gold;
  border-radius: 10px;
  overflow-y: scroll;
}

.title {
  font-weight: bold;
  text-align: center;
  padding: 20px 0;
}

• 현재로서는 회원가입 화면을 꾸미는 게 목적이 아니기에 심플하게 구색만 맞춰주었다.
• 스크롤 기능을 활용하는 게 목적이고 가로 스크롤은 필요가 없는 상황이라 overflow 속성이 아닌 overflow-y 속성 scroll 로 넣어 넘치는 부분이 있으면 스크롤이 생기도록 만들어주었다.

---

🤍 JavaScript

// div 의 스크롤바 내린 양(scrollTop) + 눈에 보이는 div 높이(clientHeight) = div 의 실제높이(scrollHeight)
$('#sign-up-content').on('scroll', function(){
    let top = document.querySelector('#sign-up-content').scrollTop;
    let sHeight = document.querySelector('#sign-up-content').scrollHeight;
    let cHeight = document.querySelector('#sign-up-content').clientHeight;
    
    if (top + cHeight > sHeight - 20){
        alert('내용을 모두 확인했습니다.');
        $('#sign-up-content').unbind('scroll'); // scroll 이벤트 한번만 실행 후 삭제
    }
})

• 스크롤바를 내린 양을 측정해주는 것이 .scrollTop, 눈에 보이는 높이를 측정해주는 것이 .scrollHeight 이다.
• 그리고 이 둘을 합한 양은 실제 높이가 되는데, 그 실제 높이를 측정해주는 것이  .scrollHeight 이다.
• 그래서 실제높이에서 20 정도 뺀 값을 기준으로 잡고 내가 스크롤을 쭉 내려서 그 기준값이 넘었을 때 원하는 이벤트를 발생시키는 것이다.
• 그리고 여기까지만 하면 이벤트가 여러 차례 발생하기도 하는데 .unbind 를 사용하면 이벤트를 실행한 후 삭제해주기 때문에 딱 한번만 이벤트를 발생시킬 수 있다.