4 스티키메뉴
1. 스크롤 양 얻기
- HTML
- CSS
1<p>Hello</p>2<p></p>1p {2 margin: 10px;3 padding: 5px;4 border: 2px solid #666;5 height: 800px;6}- jQuery
- Vanilla
- 리팩토링
1$(window).scroll(function () {2 $('p:last').text('scrollTop:' + win.scrollTop());3});1const win = window;2const secondP = document.getElementsByTagName('p')[1];3
4function throttle(func, delay) {5 let timeoutId;6 return function (...args) {7 if (!timeoutId) {8 timeoutId = setTimeout(() => {9 func.apply(this, args);10 timeoutId = null;11 }, delay);12 }13 };14}15
16const updateScrollInfo = () => {17 const currentSCT = win.scrollY;18 if (secondP) {19 secondP.innerText = `scrollTop: ${currentSCT}`;20 }21};22
23win.addEventListener('scroll', throttle(updateScrollInfo, 100));- 이 코드는 스크롤 이벤트를 처리한다.
- DOM 요소를 이벤트 리스너 외부에서 캐싱한다.
- 스로틀링 함수를 사용하여 업데이트 빈도를 제한한다.
- 이를 통해 브라우저 성능을 향상시킨다.
- 함수를 분리하여 가독성을 높인다.
- 불필요한 변수를 제거한다.
1const win = window;2win.addEventListener('scroll', () => {3 const currentSCT = win.scrollY; // Use pageYOffset for cross-browser compatibility4 const currentSCT1 = document.documentElement.scrollTop;5 const secondP = document.getElementsByTagName('p')[1];6 if (secondP) {7 secondP.innerText = `scrollTop: ${currentSCT} / ${currentSCT1}`;8 }9});2. 요소의 위치얻기
- HTML
- CSS
1<p>Hello</p>2<p>2nd Paragraph</p>1* {2 margin: 0;3 padding: 0;4}5p {6 margin: 100px 0 0 50px;7}- jQuery
- Vanilla
1var p = $('p:last');2var offset = p.offset().top;3p.text('top: ' + offset);1var lastP = document.getElementsByTagName('p')[1];2var offset = lastP.offsetTop;3lastP.innerText = 'top: ' + offset;3. 스티키메뉴
3.1. clone 활용
- 지시문
- HTML
- CSS
- JQ
- JS
완성화면 탑버튼을 만들어보자
1<!DOCTYPE html>2<html lang="ko">3 <head>4 <meta charset="UTF-8" />5 <title>Document</title>6 <script src='https://code.jquery.com/jquery-3.7.1.min.js'></script>7 <script src='https://code.jquery.com/ui/1.13.2/jquery-ui.js'></script>8 </head>9
10 <header class="page-header" role="banner">11 <div class="inner">12 <h1 class="site-logo"><a href="">LOGO</a></h1>13 <nav class="primary-nav" role="navigation">14 <ul>15 <li><a href="">About</a></li>16 <li><a href="">Work</a></li>17 <li><a href="">Blog</a></li>18 <li><a href="">Recruit</a></li>19 <li><a href="">Contact</a></li>20 </ul>21 </nav>22 </div>23 </header>24 <div class="dummy">25 <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p>26 <p>Lorem ipsum Proident irure magna dolore quis laboris deserunt ad aliquip non nostrud laborum sed et commodo ut elit cupidatat amet dolore est Ut aute et nulla dolore officia velit Ut ullamco id qui velit cupidatat dolore sed deserunt sed sed sit mollit labore esse laboris cupidatat Duis quis est ea mollit id nostrud Ut nostrud magna veniam cupidatat officia magna consectetur adipisicing sit exercitation est nisi ut fugiat exercitation non in dolor aute laborum anim incididunt commodo ut Duis cupidatat do in aliquip ea amet elit eiusmod ea nulla sed amet labore Duis incididunt do anim dolor culpa non aute cupidatat enim reprehenderit do eu esse commodo et dolor aliquip magna sint Excepteur deserunt dolore laboris magna occaecat non ea in proident voluptate nulla amet officia consequat Ut laboris irure non incididunt Ut eu id aliquip ea minim dolor nostrud ad labore incididunt ut in veniam sunt eiusmod est eiusmod anim sed ea pariatur id tempor commodo sint qui sit do Excepteur ut.</p>27 <p>Lorem ipsum In ea ullamco dolor magna et eiusmod nisi do commodo aliqua sit id ut sint eiusmod aliquip occaecat irure consectetur amet nisi amet aliquip commodo occaecat incididunt aliqua dolor id officia aliqua irure fugiat ullamco occaecat in Duis occaecat dolor labore ea cillum in commodo in magna et nulla ut incididunt eiusmod deserunt aliquip aute enim officia proident culpa officia minim magna nulla eiusmod mollit minim dolore ullamco adipisicing non anim Duis sint dolor consequat occaecat irure amet non aute proident in Ut Duis deserunt dolore do laborum id nulla minim id anim dolor nulla ad amet tempor sint ut adipisicing aliqua adipisicing in dolor sunt sunt in sint ad cupidatat elit dolor ullamco eiusmod voluptate eu nostrud aliqua exercitation dolor voluptate labore tempor aute velit laborum velit qui incididunt ullamco nisi laborum consectetur qui dolor laboris officia id ut aute consectetur nostrud aliqua dolore enim velit incididunt quis ea pariatur ut labore Excepteur minim reprehenderit velit magna pariatur ad magna dolore irure consectetur fugiat nostrud ut cupidatat aliqua consequat sit consectetur dolor in ut ullamco irure adipisicing est ad quis sit elit pariatur non elit fugiat aute ad minim ullamco sint minim laboris et occaecat laboris aliquip enim deserunt consequat ut ad commodo adipisicing cillum Excepteur eu ex commodo anim aliqua dolor laborum anim consequat nostrud irure cillum cillum voluptate sit anim veniam ut id et non ea aliqua cupidatat officia amet tempor occaecat et sit.</p>28 <p>Lorem ipsum Do dolor proident enim occaecat dolor esse non in sit dolore labore ad dolor deserunt qui ullamco dolor nisi anim non aliquip proident ut sed ad pariatur sit labore minim pariatur est ut incididunt nisi id veniam ut officia minim ex nulla culpa quis elit in id Duis adipisicing magna quis consectetur velit sunt aute ea pariatur reprehenderit dolor officia id deserunt id quis do culpa non minim consequat ad fugiat magna tempor eiusmod Duis anim elit deserunt deserunt id Duis qui tempor ad do aliqua nisi elit in dolor culpa nulla adipisicing dolore tempor sunt eiusmod voluptate eiusmod in dolore irure incididunt incididunt velit Duis sed non exercitation proident nostrud tempor Ut veniam enim aliquip ut eu dolore in mollit dolor ex laboris do amet laborum aute fugiat sed in officia aute ut est nulla Ut elit aliqua esse officia Ut eiusmod nisi officia pariatur elit aliquip labore.</p>29 </div>30</body>31</html>1@charset "UTF-8";2
3/* Base */4body {5 background-color: rgb(240, 240, 240);6 color: rgb(0, 0, 0);7 min-width: 960px;8}9
10h1,11h2,12h3,13p,14ul {15 margin: 0;16}17
18ul {19 padding-left: 0;20}21
22ul li {23 list-style-type: none;24}25
26a {27 color: inherit;28 text-decoration: none;29}30
31img {32 vertical-align: middle;33}34
35.dummy {36 margin: 0 auto;37 max-width: 32em;38 padding: 2em 0;39}40
41/*42 * Sticky header43 */44.page-header {45 background-color: rgb(255, 255, 255);46 width: 100%;47 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);48 border-bottom: 1px solid rgb(204, 204, 204);49}50
51.page-header > .inner {52 justify-content: space-around;53 display: flex;54 margin: auto;55 width: 960px;56}57
58/* Logo */59.site-logo {60 font-size: 100%;61 margin-left: -20px;62}63
64.site-logo a {65 line-height: 65px;66 font-size: 2em;67}68
69/* Primary nav */70.primary-nav {71 line-height: 65px;72 letter-spacing: 1px;73 text-transform: uppercase;74}75
76.primary-nav ul {77 display: flex;78}79
80.primary-nav a {81 display: block;82 padding: 0 1.36em;83}84
85.primary-nav a:hover {86 background-color: rgb(240, 240, 240);87}88
89/* Sticky header (clone) */90.page-header-clone {91 background-color: rgb(0, 0, 0);92 opacity: 0.9;93 position: fixed;94 top: -75px;95 width: 100%;96 /*z-index: 30;*/97 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);98 transition: top 0.25s;99}100
101.page-header-clone .inner {102 margin: auto;103 /* display: flex; */104 width: 960px;105}106
107.page-header-clone.visible {108 top: 0;109}110
111.page-header-clone:hover {112 opacity: 1;113}114
115.page-header-clone .site-logo {116 margin-left: 8px;117}118
119.page-header-clone .site-logo a {120 color: #fff;121 line-height: 35px;122}123
124.page-header-clone .primary-nav {125 font-size: 14px;126 line-height: 35px;127}128
129.page-header-clone .primary-nav a {130 color: rgb(128, 128, 128);131}1$(function () {2 var $window = $(window),3 $header = $('.page-header'),4 $headerClone = $header.contents().clone(),5 $headerCloneContainer = $('<div class="page-header-clone"></div>'),6 threshold = $header.offset().top + $header.outerHeight();7
8 $headerCloneContainer.append($headerClone);9 $headerCloneContainer.appendTo('body');10
11 $window.on('scroll', function () {12 if ($window.scrollTop() > threshold) {13 $headerCloneContainer.addClass('visible');14 } else {15 $headerCloneContainer.removeClass('visible');16 }17 });18
19 $window.trigger('scroll');20});1document.addEventListener('DOMContentLoaded', function () {2 let win = window,3 body = document.querySelector('body'),4 header = document.querySelector('.page-header'),5 headerClone = header.innerHTML,6 headerCloneContainer = document.createElement('div'),7 threshod = header.offsetTop + header.offsetHeight;8 console.log(threshod);9 headerCloneContainer.classList.add('page-header-clone');10 headerCloneContainer.innerHTML = headerClone;11 body.appendChild(headerCloneContainer);12
13 win.addEventListener('scroll', function () {14 if (window.pageYOffset > threshod) {15 headerCloneContainer.classList.add('visible');16 } else {17 headerCloneContainer.classList.remove('visible');18 }19 });20});3.3. class활용
- 지시문
- HTML
- CSS
- jQuery
1<div class="wrap">2 <header class="page-header">3 <div class="inner">4 <h1 class="site-logo">5 <a href="">Logo</a>6 </h1>7 <nav class="primary-nav">8 <ul>9 <li><a href="">menu1</a></li>10 <li><a href="">menu2</a></li>11 <li><a href="">menu3</a></li>12 <li><a href="">menu4</a></li>13 </ul>14 </nav>15 </div>16 </header>17 <div class="dummy">18 Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci19 facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum20 repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet21 consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe.22 Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt23 excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing24 elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt25 iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas26 adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni27 ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit28 amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae29 saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eligendi magni ut, laborum repellat incidunt30 excepturi, accusamus nobis quas adipisci facere, et molestiae saepe. Quos ipsam placeat sunt iure enim.31 </div>32</div>1h1,2h2,3h3,4p,5ul {6 margin: 0;7 padding: 0;8}9
10ul li {11 list-style: none;12}13
14a {15 color: inherit;16 text-decoration: none;17}18
19.wrap {20 background-color: rgb(240, 240, 240);21 color: rgb(0, 0, 0);22 min-width: 960px;23 /* padding-top: 240px; */24}25
26.dummy {27 margin: 0 auto;28 max-width: 500px;29 padding: 100px 0;30}31
32/*33 * Sticky header34 */35.page-header {36 background-color: rgb(255, 255, 255);37 height: 70px;38 width: 100%;39 min-width: 960px;40 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);41 position: absolute;42 /*아래 dummy 텍스트와의 공백을 없애기 위해*/43}44
45.page-header.sticky {46 position: fixed;47 top: 0;48 background-color: rgba(255, 255, 255, 0.1);49 backdrop-filter: blur(10px);50}51
52/* 스크롤양이 많아져 sticky class가 붙었을때의 위치 */53.page-header > .inner {54 margin: auto;55 width: 960px;56 display: flex;57 align-items: center;58 justify-content: space-between;59}60
61/* Primary nav */62.primary-nav {63 line-height: 65px;64 letter-spacing: 1px;65 text-transform: uppercase;66}67
68.primary-nav ul {69 display: flex;70 justify-content: space-between;71}72
73.primary-nav a {74 display: block;75 padding: 0 1.36em;76}77
78.primary-nav a:hover {79 background-color: rgb(240, 240, 240);80} <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
1$(function () {2 var $header = $('.page-header'),3 $headerOST = $header.offset().top;4
5 $(window).scroll(function () {6 var $currentSCT = $(this).scrollTop();7 if ($currentSCT > $headerOST) {8 $header.addClass('sticky');9 } else {10 $header.removeClass('sticky');11 }12 });13}); //window ready