[기능] 상단의 높이가 큰 메뉴상태에서 아래로 스크롤하면 상단에 높이가 낮은 메뉴가 고정됨 > 웹개발

[기능] 상단의 높이가 큰 메뉴상태에서 아래로 스크롤하면 상단에 높이가 낮은 메뉴가 고정됨

최고관리자
0
1,532
0
0
Print
글주소
09-01

CSS 와 js를 이용한 메뉴 기능입니다.

https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

에 있는 내용입니다.

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

font-size: 28px;

font-family: Arial, Helvetica, sans-serif;

}

.header {

background-color: #f1f1f1;

padding: 30px;

text-align: center;

}

#navbar {

overflow: hidden;

background-color: #333;

}

#navbar a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

#navbar a:hover {

background-color: #ddd;

color: black;

}

#navbar a.active {

background-color: #4CAF50;

color: white;

}

.content {

padding: 16px;

}

.sticky {

position: fixed;

top: 0;

width: 100%;

}

.sticky + .content {

padding-top: 60px;

}

</style>

</head>

<body>

<h2>Scroll Down</h2>

<p>Scroll down to see the sticky effect.</p>

</div>

<a href="javascript:void(0)">Contact</a>

</div>

<h3>Sticky Navigation Example</h3>

<p>The navbar will stick to the top when you reach its scroll position.</p>

<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

</div>

^<script>

^{window.onscroll = function() {myFunction()};}

^{var navbar = document.getElementById("navbar");}

^{var sticky = navbar.offsetTop;}

^{function myFunction() {}

^{if (window.pageYOffset >= sticky) {}

^{navbar.classList.add("sticky")}

^{} else {}

^{navbar.classList.remove("sticky");}

^</script>

</body>