参考記事
index.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">
<title>jQueryのscrollイベントによるCSSクラスの付け替え</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="app">
<header class="header">
header
</header>
<nav class="fixed-nav">
navigation
</nav>
<section class="section1">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, enim quas? Dolorum nesciunt quam aut, quae suscipit unde blanditiis atque eius quia saepe culpa, cupiditate cum quo eveniet deleniti nulla.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et nulla hic natus nobis eligendi. Quam fugit et perferendis suscipit voluptas enim ipsa eveniet dolores eum? Consectetur odio labore voluptatem reprehenderit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et nulla hic natus nobis eligendi. Quam fugit et perferendis suscipit voluptas enim ipsa eveniet dolores eum? Consectetur odio labore voluptatem reprehenderit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et nulla hic natus nobis eligendi. Quam fugit et perferendis suscipit voluptas enim ipsa eveniet dolores eum? Consectetur odio labore voluptatem reprehenderit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et nulla hic natus nobis eligendi. Quam fugit et perferendis suscipit voluptas enim ipsa eveniet dolores eum? Consectetur odio labore voluptatem reprehenderit.
</p>
</section>
<section class="section2">
<h1>
title
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique nobis quod vel odit aliquam nisi in, commodi possimus ex. Quo error numquam libero odit, at enim soluta asperiores suscipit quae.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, nisi nihil! Sapiente, nulla. Officiis officia animi, dicta, odio culpa et error, iure sit cum dolor veritatis perferendis minus recusandae facere.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, nisi nihil! Sapiente, nulla. Officiis officia animi, dicta, odio culpa et error, iure sit cum dolor veritatis perferendis minus recusandae facere.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, nisi nihil! Sapiente, nulla. Officiis officia animi, dicta, odio culpa et error, iure sit cum dolor veritatis perferendis minus recusandae facere.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, nisi nihil! Sapiente, nulla. Officiis officia animi, dicta, odio culpa et error, iure sit cum dolor veritatis perferendis minus recusandae facere.
</p>
</section>
<footer class="footer">
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
window.onscroll = function () {
scrollToggleClass(".section1", ".fixed-nav", "show");
}
function scrollToggleClass(rangeTarget, addTarget, classname) {
if($(rangeTarget).length){
scroll = $(window).scrollTop();
startPos = $(rangeTarget).offset().top;
endPos = startPos + $(rangeTarget).outerHeight();
if (scroll > startPos && scroll < endPos) {
$(addTarget).addClass(classname);
} else {
$(addTarget).removeClass(classname)
}
}
}
// scrolltoggleClass()関数は自作の関数のようだ
// ここでは引数の順番から、$(rangeTarget)は'.section1'、$(addTarget)は、$('.fixed-nav'), classnameは'show'というクラスの名前を示している
// showというクラスが追加されたら、CSSで黒いヘッダーが表示されるようにする
style.css
body {
position: relative;
background: #666;
margin: 0;
}
header, footer {
background: #fff;
padding: 30px;
}
.fixed-nav {
position: fixed;
top: 0;
width: 100vw;
background: #000;
color: #fff;
padding: 20px 30px;
opacity: 0;
transform: translateY(-100%);
transition: all .3s ease;
}
.fixed-nav.show {
opacity: 1;
transform: none;
}
section {
max-width: 600px;
margin: 60px auto;
padding: 20px 40px;
background: #fff;
border-radius: 8px;
}