【jQuery】スクロールの位置によってクラスを付与する方法【JavaScript】 #JavaScript

参考記事

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;
}