[jquery] 스크롤 내리면 상단고정, 스타일 변경되는 메뉴

안녕하세요 오늘은 스크롤내리면 상단(fixed)고정, 스타일 변경되는 메뉴 예제입니다.

 

 

HTML

	<div id="header">
		<h1>LOGO</h1>
		<div class="gnb">
			<ul>
				<li>
					<a href="#">메뉴1</a>
				</li>
				<li>
					<a href="#">메뉴2</a>
				</li>
				<li>
					<a href="#">메뉴3</a>
				</li>
				<li>
					<a href="#">메뉴4</a>
				</li>
			</ul>
		</div>
	</div>
	
	<div class="visual">
		visual
	</div>

 

 

CSS

/* reset */
*{margin: 0;padding: 0;}
ul li{list-style: none;}
a {text-decoration: none;color: inherit;}

#header{display: flex;justify-content: space-between;align-items: center;padding: 10px 0;transition: all 0.5s}
#header .gnb ul{display: flex;}
#header .gnb ul li{margin-right: 20px}
#header .gnb ul li:last-child{margin-right: 0}
#header.fixed{position: fixed;top: 0;left: 0;width: 100%;color: #fff}


.visual{height: 200vh;text-align: center;background: rgba(255, 0, 0, 0.52);display: flex;justify-content: center;align-items: center;}

 

 

JS

$(function() {
			$(window).scroll(function(){
				var window = $(this).scrollTop();
				if (window) {
					$('#header').addClass('fixed',1000);
				} else {
					$('#header').removeClass('fixed',1000);
				}
			});
});