이번에는 스크롤 바를 내렸을때 메뉴바의 스타일이
변하는 코드를 작성해 보았습니다.
아래의 그림과 같이 스크롤을 내렸을때
메뉴바의 높이, 로고의 크기 메뉴의 폰트크기가 부드럽게 변경됩니다.
아래는 CSS 코드입니다.
스크롤이 내려갔을때 .active 클래스를 addClass 해줍니다.
그렇기 때문에 변경되는 스타일은 .active를 포함하고 스타일을 지정해줍니다.
body,html{
margin:0;padding:0;
font-family:'Montserrat',sans-serif;
}
.container{
width:100%;
height:1500px;
background-image:url('bg.png');
}
#header{
position:fixed;
width:100%;
box-sizing: border-box;
background:#e1e1e1;
transition:.5s;
}
#header nav{
top:0; left:0;
width:100%; max-width:1460px;
margin:0 auto;
}
#header nav .logo{ float:left;padding:30px 0;}
#header nav .logo img{height:22px;}
#header nav ul{ float:right; margin:0;padding:30px 0;}
#header nav ul li{ float:left; display:block; list-style: none;}
#header nav ul li a{ padding:0 15px; line-height: 22px; text-decoration: none; color: #262626; font-size:16px;}
#header nav ul li:hover a{text-decoration: underline;}
#header nav ul li a, #header nav .logo img{transition:.5s;}
/* 스크롤 내렸을때 CSS .active */
#header.active{
background:rgba(0,0,0,.8);
}
#header.active nav .logo ,#header.active nav ul{padding:20px 0; transition:.5s;}
#header.active nav ul li a{color:#fff;font-size:14px;}
#header.active nav .logo img{height:18px;}
아래는 HTML + jquery 코드입니다.
jquery 링크 꼭 포함 시켜주셔야합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>scroll move</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700,900">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div class="container">
<div id="header">
<nav>
<div class="logo">
<img src="logo.png" />
</div>
<ul>
<li><a>HOME</a></li>
<li><a>COMPANY</a></li>
<li><a>SERVICE</a></li>
<li><a>PORODUCT</a></li>
<li><a>NOTICE</a></li>
</ul>
</nav>
</div>
</div>
<script type="text/javascript">
$(window).on('scroll',function(){
if($(window).scrollTop()){
$('#header').addClass('active');
}else{
$('#header').removeClass('active');
}
});
</script>
</body>
<html>
'coding > web' 카테고리의 다른 글
| javascript Timer 타이머 SetTimeout(), clearTimeout() (0) | 2021.06.24 |
|---|---|
| jQuery 아코디언 메뉴, 사이드바 메뉴 slideUp, slideDown, accordion menu (0) | 2021.06.22 |
| css 마우스오버시에 둥둥 뜨는 아이콘 transform, box-shadow animation (0) | 2020.03.31 |
| 초초초 초간단 기본 반응형 갤러리 responsive gallery (ul li) (0) | 2020.03.24 |
| jQuery 풀스크린, 풀페이지 슬라이드 (full-page, full-screen slide) 마우스휠 이벤트 width:100%;height:100% (17) | 2020.03.23 |