<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/reset.css">
</head>
<style>
section#home{height:100vh; }
h2{width:327px; position:sticky; top: 60px;}
h2 img{width: 100%; vertical-align: top;}
header{position:fixed; width:100%; height: 60px; z-index: 999;}
header.bg0{background:#141e3c;}
header.bg1{background:#ff7800;}
header.bg2{background:#ffe100;}
header.bg3{background:#7057a3;}
header.bg4{background:#eb6ea5;}
header.bg5{background:#c4d700;}
header.bg6{background:#005242;}
section{display: flex; align-items: flex-start;}/*align-items: flex-start;로 정렬해준다. */
section:nth-child(n+2){width: 1200px; margin: auto; border: 1px solid #000;}
.contents{height: 150vh; background: #ccc; width: 873px;}
section:nth-child(even) .contents{background:yellow}
section:nth-child(odd) .contents{background:green}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
$(window).scroll(function(){ //window에 스크롤 이벤트가 발생하면
var scrT = $(this).scrollTop()
$('header').removeClass()
$('section').each(function(i){ //섹션을 읽어라
var objT = $(this).offset().top
if(scrT>=objT){
$('header').addClass('bg'+i);
}
})
})
})
</script>
<body>
<header class="bg0">
</header>
<div class="wrap">
<section id="home">
<h2></h2>
</section>
<section>
<h2><img src="img/home_main_button_yyd.png" title="#"></h2>
<div class="contents"></div>
</section>
<section>
<div class="contents"></div>
<h2><img src="img/home_main_button_banpo.png" title="#"></h2>
</section>
<section>
<h2><img src="img/home_main_button_ddp.png" title="#"></h2>
<div class="contents"></div>
</section>
<section>
<div class="contents"></div>
<h2><img src="img/home_main_button_cgc.png" title="#"></h2>
</section>
<section>
<h2><img src="img/home_main_button_banpo.png" title="#"></h2>
<div class="contents"></div>
</section>
<section>
<div class="contents"></div>
<h2><img src="img/home_main_button_season_oil_tank.png" title="#"></h2>
</section>
<section>
<h2><img src="img/home_main_button_cm.png" title="#"></h2>
<div class="contents"></div>
</section>
</div>
</body>
</html>
<script>
$(function(){
$(window).scroll(function(){ //window에 스크롤 이벤트가 발생하면
var scrT = $(this).scrollTop()
$('header').removeClass()
$('section').each(function(i){ //섹션을 읽어라
var objT = $(this).offset().top
if(scrT>=objT){
$('header').addClass('bg'+i);
}
})
})
})
</script>
<script>
$(function(){
var bg=['#141e3c','#ff7800','#ffe100','#7057a3','#eb6ea5','#c4d700','#005242']
$(window).scroll(function(){ //window에 스크롤 이벤트가 발생하면
var scrT = $(this).scrollTop()
$('section').each(function(i){ //섹션을 읽어라
var objT = $(this).offset().top
if(scrT>=objT){
$('header').css({'background':bg[i]});
}
})
})
})
</script>
