콘텐츠로 이동

스티키메뉴

1. 스크롤 양 얻기

HTML
CSS

<p>Hello</p>
<p></p>

p {
  margin: 10px;
  padding: 5px;
  border: 2px solid #666;
  height: 800px;
}

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

const win = window;
const secondP = document.getElementsByTagName('p')[1];

function throttle(func, delay) {
  let timeoutId;
  return function (...args) {
    if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func.apply(this, args);
        timeoutId = null;
      }, delay);
    }
  };
}

const updateScrollInfo = () => {
  const currentSCT = win.scrollY;
  if (secondP) {
    secondP.innerText = `scrollTop: ${currentSCT}`;
  }
};

win.addEventListener('scroll', throttle(updateScrollInfo, 100));

이 코드는 스크롤 이벤트를 처리한다.
DOM 요소를 이벤트 리스너 외부에서 캐싱한다.
스로틀링 함수를 사용하여 업데이트 빈도를 제한한다.
이를 통해 브라우저 성능을 향상시킨다.
함수를 분리하여 가독성을 높인다.
불필요한 변수를 제거한다.

const win = window;
win.addEventListener('scroll', () => {
  const currentSCT = win.scrollY; // Use pageYOffset for cross-browser compatibility
  const currentSCT1 = document.documentElement.scrollTop;
  const secondP = document.getElementsByTagName('p')[1];
  if (secondP) {
    secondP.innerText = `scrollTop: ${currentSCT} / ${currentSCT1}`;
  }
});

2. 요소의 위치얻기

HTML
CSS

<p>Hello</p>
<p>2nd Paragraph</p>

* {
  margin: 0;
  padding: 0;
}
p {
  margin: 100px 0 0 50px;
}

jQuery
Vanilla

var p = $('p:last');
var offset = p.offset().top;
p.text('top: ' + offset);

var lastP = document.getElementsByTagName('p')[1];
var offset = lastP.offsetTop;
lastP.innerText = 'top: ' + offset;

3. 스티키메뉴

3.1. `clone` 활용

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

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  <script src='https://code.jquery.com/jquery-3.7.1.min.js'></script>
  <script src='https://code.jquery.com/ui/1.13.2/jquery-ui.js'></script>
  </head>

  <header class="page-header" role="banner">
    <div class="inner">
      <h1 class="site-logo"><a href="">LOGO</a></h1>
      <nav class="primary-nav" role="navigation">
        <ul>
          <li><a href="">About</a></li>
          <li><a href="">Work</a></li>
          <li><a href="">Blog</a></li>
          <li><a href="">Recruit</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <div class="dummy">
    <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>
    <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>
    <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>
    <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>
  </div>
</body>
</html>

@charset "UTF-8";

/* Base */
body {
  background-color: rgb(240, 240, 240);
  color: rgb(0, 0, 0);
  min-width: 960px;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding-left: 0;
}

ul li {
  list-style-type: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  vertical-align: middle;
}

.dummy {
  margin: 0 auto;
  max-width: 32em;
  padding: 2em 0;
}

/*
 * Sticky header
 */
.page-header {
  background-color: rgb(255, 255, 255);
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgb(204, 204, 204);
}

.page-header > .inner {
  justify-content: space-around;
  display: flex;
  margin: auto;
  width: 960px;
}

/* Logo */
.site-logo {
  font-size: 100%;
  margin-left: -20px;
}

.site-logo a {
  line-height: 65px;
  font-size: 2em;
}

/* Primary nav */
.primary-nav {
  line-height: 65px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.primary-nav ul {
  display: flex;
}

.primary-nav a {
  display: block;
  padding: 0 1.36em;
}

.primary-nav a:hover {
  background-color: rgb(240, 240, 240);
}

/* Sticky header (clone) */
.page-header-clone {
  background-color: rgb(0, 0, 0);
  opacity: 0.9;
  position: fixed;
  top: -75px;
  width: 100%;
  /*z-index: 30;*/
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  transition: top 0.25s;
}

.page-header-clone .inner {
  margin: auto;
  /* display: flex; */
  width: 960px;
}

.page-header-clone.visible {
  top: 0;
}

.page-header-clone:hover {
  opacity: 1;
}

.page-header-clone .site-logo {
  margin-left: 8px;
}

.page-header-clone .site-logo a {
  color: #fff;
  line-height: 35px;
}

.page-header-clone .primary-nav {
  font-size: 14px;
  line-height: 35px;
}

.page-header-clone .primary-nav a {
  color: rgb(128, 128, 128);
}

$(function () {
  var $window = $(window),
    $header = $('.page-header'),
    $headerClone = $header.contents().clone(),
    $headerCloneContainer = $('<div class="page-header-clone"></div>'),
    threshold = $header.offset().top + $header.outerHeight();

  $headerCloneContainer.append($headerClone);
  $headerCloneContainer.appendTo('body');

  $window.on('scroll', function () {
    if ($window.scrollTop() > threshold) {
      $headerCloneContainer.addClass('visible');
    } else {
      $headerCloneContainer.removeClass('visible');
    }
  });

  $window.trigger('scroll');
});

document.addEventListener('DOMContentLoaded', function () {
  let win = window,
    body = document.querySelector('body'),
    header = document.querySelector('.page-header'),
    headerClone = header.innerHTML,
    headerCloneContainer = document.createElement('div'),
    threshod = header.offsetTop + header.offsetHeight;
  console.log(threshod);
  headerCloneContainer.classList.add('page-header-clone');
  headerCloneContainer.innerHTML = headerClone;
  body.appendChild(headerCloneContainer);

  win.addEventListener('scroll', function () {
    if (window.pageYOffset > threshod) {
      headerCloneContainer.classList.add('visible');
    } else {
      headerCloneContainer.classList.remove('visible');
    }
  });
});

3.3. `class`활용

<div class="wrap">
  <header class="page-header">
    <div class="inner">
      <h1 class="site-logo">
        <a href="">Logo</a>
      </h1>
      <nav class="primary-nav">
        <ul>
          <li><a href="">menu1</a></li>
          <li><a href="">menu2</a></li>
          <li><a href="">menu3</a></li>
          <li><a href="">menu4</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <div class="dummy">
    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 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 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 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 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 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 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 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 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 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 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 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.
  </div>
</div>

h1,
h2,
h3,
p,
ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  background-color: rgb(240, 240, 240);
  color: rgb(0, 0, 0);
  min-width: 960px;
  /* padding-top: 240px; */
}

.dummy {
  margin: 0 auto;
  max-width: 500px;
  padding: 100px 0;
}

/*
 * Sticky header
 */
.page-header {
  background-color: rgb(255, 255, 255);
  height: 70px;
  width: 100%;
  min-width: 960px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  position: absolute;
  /*아래 dummy 텍스트와의 공백을 없애기 위해*/
}

.page-header.sticky {
  position: fixed;
  top: 0;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

/* 스크롤양이 많아져 sticky class가 붙었을때의 위치 */
.page-header > .inner {
  margin: auto;
  width: 960px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Primary nav */
.primary-nav {
  line-height: 65px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.primary-nav ul {
  display: flex;
  justify-content: space-between;
}

.primary-nav a {
  display: block;
  padding: 0 1.36em;
}

.primary-nav a:hover {
  background-color: rgb(240, 240, 240);
}

<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>

$(function () {
  var $header = $('.page-header'),
    $headerOST = $header.offset().top;

  $(window).scroll(function () {
    var $currentSCT = $(this).scrollTop();
    if ($currentSCT > $headerOST) {
      $header.addClass('sticky');
    } else {
      $header.removeClass('sticky');
    }
  });
}); //window ready