스크롤하면 헤더, btn-top버튼에 active클래스를 추가하여 변경하기
<head>안에 폰트어썸, 제이쿼리 연결 !!!
<div class="container">
<header>
<div class="lnb-inner">lnb-inner</div>
<div class="gnb-inner">gnb-inner</div>
</header>
<section class="main">
<p>lorem100</p>
</section>
<a href="#" class="btn-top">
<i class="fas fa-arrow-up"></i>
</a>
</div> * {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
color: #fff;
text-align: center;
}
.lnb-inner,
.gnb-inner {
transition: .5s;
}
.lnb-inner {
background-color: crimson;
height: 40px;
line-height: 40px;
overflow: hidden;
}
.gnb-inner {
background-color: #000;
height: 80px;
line-height: 80px;
}
/* Active Class */
header.act .lnb-inner {
height: 0;
}
header.act .gnb-inner {
background-color: #fff;
color: #000;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
section.main {
font-size: 3em;
line-height: 2em;
color: #bbb;
}
.btn-top {
opacity: 0;
bottom: 0px;
/* opacity: 0;
transform: translateY(80px); */
transition: .5s;
position: fixed;
/* bottom: 20px; */
right: 20px;
width: 40px;
height: 40px;
line-height: 44px;
text-align: center;
background-color: #000;
border-radius: 50%;
}
.btn-top i {
font-size: 25px;
color: #fff;
}
.btn-top.act {
opacity: 1;
bottom: 20px;
/* transform: translateY(0); */
}
// btn-top 버튼이 아래에서 위로 올라오는효과
1. translateY()
2. bottom:
.btn-top {
opacity: 0;
bottom: 0px;
transition: .5s;
/* 또는 */
opacity: 0;
transform: translateY(80px);
transition: .5s;
}
.btn-top.act {
opacity: 1;
bottom: 20px;
/* 또는 */
opacity: 1;
transform: translateY(0);
}
// 제이쿼리
window가 scroll될 때 스크롤탑이 50보다 크면 (스크롤한 상태) >> active클래스추가
else >> remove .active
$(window).scrollTop() : 스크롤에 따라 변하는 세로좌표, 맨위(0) ~ 맨아래(max)
<script>
$(window).scroll(function() {
if($(window).scrollTop() > 50) {
$('header, .btn-top').addClass('act');
} else {
$('header, .btn-top').removeClass('act');
}
});
</script>'Web > Java Script' 카테고리의 다른 글
| [플러그인] Slick Slider 사용법, CSS변경 (0) | 2022.02.15 |
|---|---|
| [제이쿼리] 반응형 모달(translate속성 : 애니메이션 효과) (0) | 2022.02.09 |
| [js 독학백서] 따라하는 걸음마 문제 #2 현재 시간 출력 (clock.js) (0) | 2022.01.12 |
| [js 독학백서] 따라하는 걸음마 문제 #1 할 일 등록하기 (TodoList) (0) | 2022.01.12 |
| [js 독학백서] 5. 객체 심화 (0) | 2021.12.30 |