<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문제7</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
header{
width:100%;
height:80px;
background-color:white;
display:flex;
justify-content:center;
align-items:center;
font-size:30px;
transition:0.3s;
}
/* active 붙었을 때 */
.header_active{
background-color:black;
color:white;
position:fixed;
top:0;
left:0;
z-index:10;
}
section{
height:100vh;
border:2px solid #ddd;
display:flex;
justify-content:center;
align-items:center;
font-size:50px;
}
.section_1{
background-color:lightgray;
}
.section_2{
background-color:lightblue;
}
.section_3{
background-color:lightpink;
}
</style>
</head>
<body>
<header>
Header
</header>
<section class="section_1">
Section One
</section>
<section class="section_2">
Section Two
</section>
<section class="section_3">
Section Three
</section>
<script>
const headerEl = document.querySelector('header');
const handleScroll = () => {
const pageY = window.scrollY;
if(pageY >= 300){
headerEl.classList.add('header_active');
}else{
headerEl.classList.remove('header_active');
}
}
window.addEventListener('scroll', handleScroll);
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문제7</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
header{
width:100%;
height:80px;
background-color:white;
display:flex;
justify-content:center;
align-items:center;
font-size:30px;
transition:0.3s;
}
/* active 붙었을 때 */
.header_active{
background-color:black;
color:white;
position:fixed;
top:0;
left:0;
z-index:10;
}
section{
height:100vh;
border:2px solid #ddd;
display:flex;
justify-content:center;
align-items:center;
font-size:50px;
}
.section_1{
background-color:lightgray;
}
.section_2{
background-color:lightblue;
}
.section_3{
background-color:lightpink;
}
</style>
</head>
<body>
<header>
Header
</header>
<section class="section_1">
Section One
</section>
<section class="section_2">
Section Two
</section>
<section class="section_3">
Section Three
</section>
<script>
const headerEl = document.querySelector('header');
const handleScroll = () => {
const pageY = window.scrollY;
if(pageY >= 300){
headerEl.classList.add('header_active');
}else{
headerEl.classList.remove('header_active');
}
}
window.addEventListener('scroll', handleScroll);
</script>
</body>
</html>
#문제 7 : 스크롤 시 header 변경