스크롤 위치에 따라 버튼 스타일 변경하기(scrollTop)
CSS 25.07.30스크롤 위치에 따라 버튼 스타일을 변경하는 방법은?
스크롤 위치를 감지하는 scrollTop() 메서드와 jQuery의 scroll 이벤트를 활용하면,
특정 위치를 기준으로 버튼에 클래스를 동적으로 추가하거나 제거하여 스타일을 손쉽게 변경할 수 있습니다.
이 방법은 사용자 경험을 향상시키는 인터랙션 요소로 자주 활용됩니다.
✅ 활용 가능한 예시
- 스크롤 위치에 따라 헤더 고정 및 스타일 변경
- 스크롤 위치에 따라 텍스트+아이콘 버튼을 축약형 아이콘 버튼으로 변경
➰➰➰
✨ 실전 예제 : 스크롤 위치에 따라 텍스트+아이콘 버튼을 축약형 아이콘 버튼으로 변경
✏️ HTML 구조는 이렇게 생겼어요
✔ 먼저, 버튼 요소를 준비합니다.
1 2 3 4 5 6 | <div id="fix-contact"> <a href="" class="btn--primary link-contact"> <span class="btn__tit">contact</span> <span class="material-symbols-outlined">stylus</span> </a> </div> | cs |
✏️ CSS로 효과 구현하기
✔ 버튼의 기본 상태와 스크롤 시 적용할 축약형 스타일을 정의합니다.
1 2 3 4 5 6 7 | #fix-contact{position:fixed;top:60px;right:40px;z-index:2} #fix-contact .btn--primary.link-contact{font-size:16px;background-color:var(--point-color);color:#fff;transition:min-width .1s ease} #fix-contact .btn--primary.link-contact .btn__tit{display:block;opacity:1;visibility:visible;transition:opacity 0.3s } #fix-contact .btn--primary.link-contact .material-symbols-outlined{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;font-size:20px} #fix-contact.small .btn--primary.link-contact{min-width:53px;padding:0} #fix-contact.small .btn--primary.link-contact .btn__tit{display:none;opacity:0;visibility:hidden} | cs |
✏️ jQuery scroll 이벤트 구현하기
scroll 이벤트
✔ 브라우저의 스크롤이 발생할 때마다 특정 동작을 수행하도록 합니다.
scrollTop()
✔ 스크롤된 위치(페이지 상단에서부터 떨어진 픽셀 값)를 실시간으로 감지합니다.
✔ curr 변수는 scrollTop() 값이 실시간으로 업데이트되며, 이를 기준으로 조건을 판단합니다.
✔ 스크롤 위치가 10px이상일 경우 .small 클래스를 추가하여 버튼을 축약형으로 바꿉니다.
✔ 스크롤 위치가 10px미만일 경우 .small 클래스를 제거되어 버튼이 원래 형태로 돌아옵니다.
1 2 3 4 5 6 7 8 9 | $(window).scroll(function () { let curr = $(this).scrollTop(); if (curr > 10) { $("#fix-contact").addClass("small"); } if (curr < 10) { $("#fix-contact").removeClass("small"); } }); | cs |
See the Pen 스크롤 위치에 따라 버튼 스타일 변경하기(scrollTop) by designkits (@designkits) on CodePen.
