3月3日の作業データ

動画データが入っているパターン(nav02)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動画を使ったファーストビュー</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Felica</h1>
<nav id="g-nav">
<ul>
<li><a href="#">企業情報</a></li>
<li><a href="#">事業内容</a></li>
<li><a href="#">事例紹介</a></li>
<li><a href="#">取り組み</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<div class="main-copy">
<p>日本一、<br>
ヒトを惹きつける<br>
会社を創る。</p>
</div>
<div class="main-visual">
<video src="img/main.mp4" autoplay muted loop></video>
</div>
<div class="video-wrapper"></div>
<div class="contents">
<h2>ここにコンテンツ</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, odit?</p>
</div>
</main>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>

<script>
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('header').addClass('scroll');
}else{
$('header').removeClass('scroll');
}
});
});
</script>
</body>
</html>


style.css

@charset "utf-8";

header{
width: 100%;
height: 100px;
background-color: rgba(255, 255, 255, 0);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 60px;
position: fixed;
top: 0;
z-index: 1000;
color: #FFF;
}
header.scroll{
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 3px 3px #EEE;
color: #000;
}
#g-nav>ul{
display: flex;
justify-content: center;
}
#g-nav li{
margin: 0 20px;
}
#g-nav a{
padding: 10px;
font-size: 14px;
color: #FFF;
}
header.scroll>#g-nav a{
color: #000;
}

main{
position: relative;
}
.main-copy{
position: absolute;
top: 200px;
left: 100px;
color: #FFF;
font-size: 28px;
z-index: 500;
line-height: 1.8;
}
.main-visual{
width: 100%;
height: 100vh;
}
.main-visual>video{
object-fit: cover;
width: 100%;
height: 100%;
}
.video-wrapper{
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-color: rgba(21, 48, 138, 0.438);
}
.contents{
width: 100%;
height: 3000px;
background-color: #FFF;
text-align: center;
padding-top: 400px;
}
.contents>p{
width: 300px;
margin-left: 100px;
text-align: left;
text-indent: 30px;
padding-left: 30px;
background:url(../img/icon.svg) no-repeat left top/20px;
}

 

スクロール量を取得するパターン(nav2のindex2.html)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロールイベントの実装</title>
<style>
html,body{
margin: 0;
padding: 0;
}
body{
height: 3000px;
}
header{
width: 100%;
height: 60vh;
background-color: burlywood;
}
#box{
width: 100%;
height: 500px;
background-color: #AAA;
}
#box.scroll{
background-color: cornflowerblue;
}
#box2{
width: 100%;
height: 500px;
background-color: #AAA;
}
#box2.scroll{
background-color: cornflowerblue;
}
</style>
</head>
<body>
<header></header>
<div id="box"></div>
<div id="box2"></div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script>
$(function(){
$(window).scroll(function(){
var y = $(this).scrollTop();
console.log(y);
var z = $('#box').offset().top;
console.log(z);
var z2 = $('#box2').offset().top;
console.log(z2);

//yがz超過かつz2未満の時は#boxにaddClass
if(y > z && y < z2){
$('#box').addClass('scroll').siblings('#box2').removeClass('scroll');
}else if(y >= z2){
//yがz2以上の時は#box2にaddClass、#boxにremoveClassする
$('#box2').addClass('scroll').siblings('#box').removeClass('scroll');
}
});
});
</script>
</body>
</html>