<!-- header -->
<header class="header">
<div class="header__inner">
<div class="header__title">
<h1>タイトル</h1>
</div>
<div class="header__nav">
<ul>
<li><a href="">ナビメニュー</a></li>
<li><a href="">ナビメニュー</a></li>
<li><a href="">ナビメニュー</a></li>
</ul>
</div>
</div>
</header>
<!-- first-v -->
<div class="first-v">
<p>ファーストビュー</p>
</div>
<!-- wrap -->
<div class="wrap">
<p>スクロールするとheaderの背景色が変わります</p>
</div>
<div class="wrap">
<p>スクロールするとheaderの背景色が変わります</p>
</div>
/* header */
.header {
padding: 20px 0;
position: absolute;
position: fixed;
max-width: 100%;
width: 100%;
z-index: 10;
box-sizing: border-box;
transition: background-color .5s, color .5s;
}
.header__inner {
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.header__title h1 {
font-size: 25px;
}
.header__nav ul {
display: flex;
}
.header__nav ul li:not(:first-child) {
margin-left: 50px;
}
.header__nav ul li a {
font-size: 18px;
text-decoration: none;
color: black;
}
/* first-v */
.first-v {
padding-top: 65px;
position: relative;
background-color: pink;
height: calc(100vh - 65px);
}
.first-v p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3.5vw;
}
/* wrap */
.wrap {
position: relative;
height: 100vh;
}
.wrap p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2vw;
line-height: 1.5;
}
/* headerの色を変える */
.header.change-color {
background-color: red;
}
/* レスポンシブ */
@media (max-width: 600px) {
.header__nav {
display: none;
}
}// headerをスクロールすると、色が変わる
jQuery(window).on('scroll', function () {
if (jQuery('.first-v').height() < jQuery(this).scrollTop()) {
jQuery('.header').addClass('change-color');
} else {
jQuery('.header').removeClass('change-color');
}
});
External CSS
This Pen doesn't use any external CSS resources.