Powered by

# 스티키메뉴

In 

# 목차

  • 1. 스크롤 양 얻기
  • 2. 요소의 위치얻기
  • 3. 스티키메뉴
    • 3.1. clone 활용
    • 3.3. class활용

# 1. 스크롤 양 얻기

HTML
CSS 
<p>Hello</p>
<p></p>
p {
	margin: 10px;
	padding: 5px;
	border: 2px solid #666;
	height: 800px;
}
jQuery
Vanilla 
$(window).scroll(function () {
	$('p:last').text('scrollTop:' + win.scrollTop());
});
var win = window;
win.addEventListener('scroll', function () {
	var currentSCT = win.scrollY; //구형iex
	var currentSCT = win.pageYOffset;
	var currentSCT1 = document.documentElement.scrollTop;
	document.getElementsByTagName('p')[1].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.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
jquery jquery + javascript 스티키메뉴 가변높이 ui

© Copyright 2024. All rights reserved.