if문
jQuery에서 if문 활용으로 스크롤이 내려갔는지 유무를 판단해 header의 CSS를 바꿀 수 있다.
실습
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[제이쿼리 실전예제] if 조건문을 이용한 스크롤 후 헤더 디자인 변경</title>
<link rel="stylesheet" href="./assets/css/style.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="container">
<header>
<div class="lnb-inner">LNB inner</div>
<div class="gnb-inner">GNB inner</div>
</header>
<section>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur libero ipsam iste? Illo, ipsam debitis molestias temporibus eaque quo minus harum nostrum asperiores ipsa sunt adipisci vero quidem animi vitae in inventore error cupiditate alias velit quam rerum ratione ullam? Cum soluta maiores explicabo, rem iste delectus recusandae perspiciatis neque quia dolores quo at libero aperiam totam ipsam, architecto voluptas officia inventore ut quibusdam quas deleniti? Obcaecati expedita eveniet vel repellat impedit aut quam voluptatem rem quae, culpa laborum debitis laboriosam nostrum dolore sint praesentium porro dolor eum molestias quo earum minima animi voluptas! Sapiente esse tenetur blanditiis! Vitae, maxime.
</p>
</section>
</div>
<a class="btn-top" href="#"><i class="fa fa-arrow-up"></i></a>
<script src="./assets/js/scrypt.js"></script>
</body>
</html>CSS
/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body{
margin: 0;
}
header{
color: white;
text-align: center;
font-size: 20px;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.lnb-inner,
.gnb-inner{
transition: 0.5s;
}
.lnb-inner{
background-color: crimson;
height: 30px;
line-height: 30px;
}
.gnb-inner{
background-color: black;
height: 80px;
line-height: 80px;
}
/* Header Active Class */
header.active .lnb-inner{
/* display: none; */
height: 0;
overflow: hidden;
}
header.active .gnb-inner{
background-color: white;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.068);
color: #000;
}
.btn-top{
position: fixed;
right: 20px;
bottom: 20px;
font-size: 26px;
color: #fff;
background-color: black;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
line-height: 37px;
transform: translateY(100px);
opacity: 0;
transition: 0.5s;
}
.btn-top.active{
transform: translateY(0);
opacity: 1;
}
section p{
font-size: 3em;
color: #ddd;
line-height: 2em;
}jQuery
// Header Active Class
$(window).scroll(function(){
if($(window).scrollTop() > 50) {
$('header, .btn-top').addClass('active')
}
else{
$('header, .btn-top').removeClass('active')
}
})