🐨CoalaCoding
DocsExamplesTry itBoardB반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • 01_topBtn
  • 02_rollingBanner
  • 03_menu
  • 04_stickyMenu
  • 05_accordion
  • 06_swiper
  • 07_activeMenu
  • 스킬바 UI
  • 09_slide
  • 10_tab
  • 11_scrollEffect
  • 12_ajax
  • 13_tabSlide
  • 14_gsap
  • 15_adaption
  • 16_좋은-디자인을-위한-요소
  • 17_논리적vs물리적해상도
  • 18_게슈탈트이론
  • 19_색채심리학
  • 20_황금비율
  • 21_컬러모드
  • 22_디자인실무용어
  • 23_이미지파일의특징
  • 24_폰트와사이즈
  • 25_레이아웃기초
  • 26_10가지법칙
  • 27_아이트래킹
  • 28_색상을성공적으로고르는방법
  • 29_타이포그래피10가지팁
  • 30_스타일가이드만들기
  • 31_모바일디자인버튼
  • 32_조형요소
  • 33_6가지비주얼체계규칙
  • 34_아이콘디자인이론
  • 35_해상도와그리드시스템
  • 36_피그마란
  • 37_작업환경세팅
  • 38_인터페이스예제
  • 39_기능심화
  • 40_인터페이스설계
  1. 홈
  2. 문서
  3. HTML & CSS
  4. UI 컴포넌트
  5. 04_stickyMenu

04_stickyMenu

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

1. 스크롤 양 얻기

<p>Hello</p>
<p></p>
$(window).scroll(function () {
  $('p:last').text('scrollTop:' + win.scrollTop());
});

2. 요소의 위치얻기

<p>Hello</p>
<p>2nd Paragraph</p>
var p = $('p:last');
var offset = p.offset().top;
p.text('top: ' + offset);

3. 스티키메뉴

3.1. clone 활용

완성화면 탑버튼을 만들어보자

3.3. class활용

완성화면

목차

  • 구문