개발/FRONT

[JS] Jquery 상단 바 고정 하는 법, 상단 고정 스크롤 헤더 사용하기

Hdev&Shoes 2023. 1. 2. 21:31
728x90

 

하단으로 스크롤을 할 때, 상단에 붙어있는 메뉴 바를 고정시켜

아래로 스크롤 해도 메뉴 바는 고정되어 상단 메뉴에 접근을 용이하게 할 때, 사용하면 된다

 

 

아래 코드 참고

 

 

<HTML>

<section id="screen1">
	<p>Scroll down</p>
	<nav>
		 <ul>
		      <li><a href="#">Home</a></li>
		 	  <li><a href="#">About</a></li>
		 	  <li><a href="#">Services</a></li>
		 	  <li><a href="#">Team</a></li>
		 	  <li><a href="#">Contact</a></li>
		 </ul>
	</nav>
</section>
<section id="screen2"></section>
<section id="screen3"></section>

 

 

<JS>

 

   $(document).ready(function(){
	   $(window).bind('scroll', function() {
	   var navHeight = $( window ).height() - 70;
			 if ($(window).scrollTop() > navHeight) {
				 $('nav').addClass('fixed');
			 }
			 else {
				 $('nav').removeClass('fixed');
			 }
		});
	});

 

<CSS>

 

* {margin: 0; padding: 0;}

a {text-decoration: none;}

/* This class is added on scroll */
.fixed {
	position: fixed;
	top: 0;
	height: 70px;
	z-index: 1;
}

body {
	color: #fff;
	font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;
	font-size: 18px;
	text-align: center;
}

/* Navigation Settings */
nav {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 70px;
	background: #fff;
}

nav li {
	display: inline-block;
	padding: 24px 10px;
}

nav li a {
	color: #757575;
	text-transform: uppercase;
}

section {
	height: 100vh;
}

/* Screens Settings */
#screen1 {
	background: #43b29d;
}

#screen1 p {
	padding-top: 200px;
}

#screen2 {
	background: #efc94d;
}

#screen3 {
	background: #e1793d;
}

@media only screen and (max-width: 520px) {

	nav li {
		padding: 24px 4px;
	}

	nav li a {
		font-size: 14px;
	}

}

 

 

728x90