【コーディング練習用】スクロールで追従している要素の色を変えたり任意の場所で止める

Date:	2024.05.14
Update:	2024.05.15

執筆･監修

上杉洋　Hiroshi Uesugi

1991年生まれ。株式会社ステップバイワーク代表。 2013年に株式会社n.uを設立。 2015年にStep by workとして独立。 2021年株式会社ステップバイワークとして法人化。 HP制作/SEO対策/コンテンツ制作/動画制作/YouTube運用/写真撮/WordPressを全て一人でやります。

Xにポストする

Facebookで共有 B! ブックマークする

コピーする

JavaScriptのgetBoundingClientRect()やwindow.scrollYなどを使用してposition:fixed;の要素の色を変えたり、任意の位置で止めたりしてみます

要素のスクロール位置を取得してなんやかんやするのはWeb制作のコーディングにおいても頻出です

デザインデータも配布していますのでぜひ自分でもやってみてください！！

デザインデータ（Googleドライブ）
なんかファイルが見えてるけどそのままダウンロードすればXDとして開けます

コーディングしたHTMLファイル一式

let title;
let title_en;
let title_ja;
let sec02;
let dummy;

title = document.querySelector('.title')
title_en = document.querySelector('.title .en')
title_ja = document.querySelector('.title .ja')
sec02 = document.querySelector('.sec02')
dummy = document.querySelector('.dummy')

function setPos() {
  title_pos = title.getBoundingClientRect().top;
  title_en_pos = title_en.getBoundingClientRect().top + (title_en.clientHeight / 2);
  title_ja_pos = title_ja.getBoundingClientRect().top + (title_ja.clientHeight / 2);
  sec02_pos = sec02.getBoundingClientRect().top + window.scrollY;
  dummy_pos = dummy.getBoundingClientRect().top + window.scrollY;
}
document.addEventListener('DOMContentLoaded', function () {
  setPos()
})
window.addEventListener('load', function () {
  setPos()
})
window.addEventListener('resize', function () {
  setPos()
})
window.addEventListener('scroll', function () {
  if (window.scrollY + title_en_pos >= sec02_pos) {
    title_en.classList.add('active')
  } else {
    title_en.classList.remove('active')
  }
  if (window.scrollY + title_ja_pos >= sec02_pos) {
    title_ja.classList.add('active')
  } else {
    title_ja.classList.remove('active')
  }
  if (window.scrollY + title_pos >= dummy_pos) {
    title.classList.add('active')
  } else {
    title.classList.remove('active')
  }
});

<!DOCTYPE html>
<html lang="ja">
<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>
  </title>
  <link rel="shortcut icon" href="assets/images/favicon.png">
  <meta name="format-detection" content="telephone=no">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <section class="sec01">
    <img src="assets/images/bg1.jpg" alt="" width="743" height="770">
  </section>
  <section class="sec02">
    <div class="inner">
      <h1 class="title">
        <span class="en">
          <svg xmlns="http://www.w3.org/2000/svg" width="829.68" height="83.64" viewBox="0 0 829.68 83.64">
            <g id="グループ_3" data-name="グループ 3" transform="translate(-187.8 -344)">
              <path class="step" id="パス_2" data-name="パス 2" d="M4.8-7.2A55.881,55.881,0,0,0,16.92-.84,42.782,42.782,0,0,0,32.64,1.8c8.52,0,16.8-1.32,23.64-8.16,5.76-5.76,7.56-12.84,7.56-20.16,0-5.52-1.08-9.96-5.16-14.28-4.2-4.56-9.48-6.36-14.52-7.92L37.8-50.64c-4.92-1.44-6.36-2.88-6.96-3.6a5.354,5.354,0,0,1-1.08-3.6,5.923,5.923,0,0,1,2.04-4.32,9.968,9.968,0,0,1,6.84-2.4c2.76,0,7.44.48,13.68,5.4l8.28-16.2c-7.56-3.96-16.8-6.48-24.72-6.48-9.72,0-16.44,3.48-20.52,7.56C11.88-70.8,8.04-64.8,8.04-54.96c0,4.08.48,9.72,4.56,14.16,3.24,3.6,8.16,5.4,11.52,6.48l5.4,1.68c5.16,1.56,8.28,2.4,10.32,4.2a6.253,6.253,0,0,1,2.28,4.8,7.158,7.158,0,0,1-2.04,5.04c-1.32,1.44-3.84,2.76-8.04,2.76-7.2,0-13.92-3.96-18.36-8.16ZM124.2-62.4V-80.04H69.36V-62.4H86.4V0h20.76V-62.4Zm54.72-17.64H133.44V0h45.48V-17.64H154.2v-13.8h23.4V-49.08H154.2V-62.4h24.72Zm47.04,53.52c6.24,0,13.68-.84,19.92-6.96s7.08-13.56,7.08-19.92c0-6.72-1.2-13.44-7.44-19.44-6.12-5.88-13.32-7.2-20.28-7.2H192.12V0h20.76V-26.52ZM212.88-63.24h7.08c2.64,0,6.48.36,8.88,2.88,2.16,2.16,2.4,5.04,2.4,7.2,0,1.92-.12,5.16-2.64,7.32-2.52,2.28-6.6,2.52-8.76,2.52h-6.96ZM325.32,0c9.84,0,17.4-3.12,21.72-7.56,3-3,5.88-8.16,5.88-15.72,0-6.36-2.16-11.52-5.4-14.64a19.9,19.9,0,0,0-10.92-4.8,12.6,12.6,0,0,0,6.48-6.24,20.745,20.745,0,0,0,2.28-9.84c0-7.08-2.16-12-4.92-15-4.92-5.4-11.76-6.24-17.52-6.24H291.96V0Zm-12.6-64.08h3.84c4.08,0,6.6,1.08,7.92,2.4a8.228,8.228,0,0,1,1.92,5.4A7.754,7.754,0,0,1,324.48-51c-2.16,2.28-5.76,2.52-7.92,2.52h-3.84Zm0,31.08h4.32c5.16,0,10.32.12,12.84,2.64a8.134,8.134,0,0,1,2.04,5.76,7.786,7.786,0,0,1-1.68,5.16c-2.28,2.64-7.08,3.24-12.84,3.24h-4.68ZM379.2,0h20.88V-38.4l29.88-41.64h-25.2L390.24-58.2,375.12-80.04H350.28L379.2-38.4Z" transform="translate(183 425.84)"/>
              <path class="work" id="パス_1" data-name="パス 1" d="M456.48-80.04,480.36,0h21.12l15.36-46.32L531.36,0H552.6l25.56-80.04H556.44L541.32-28.32,525.6-80.04H509.04L492.12-28.32,478.2-80.04Zm214.8,40.08a41.4,41.4,0,0,0-12.6-30c-8.16-7.8-19.68-11.88-31.56-11.88s-23.4,4.08-31.56,11.88a41.4,41.4,0,0,0-12.6,30,41.532,41.532,0,0,0,12.6,29.88c8.16,7.8,19.68,11.88,31.56,11.88s23.4-4.08,31.56-11.88A41.532,41.532,0,0,0,671.28-39.96ZM627.12-61.68a23.959,23.959,0,0,1,16.08,6.36,21.6,21.6,0,0,1,6.48,15.36A22.04,22.04,0,0,1,643.2-24.6c-3.72,3.72-9,6.24-16.08,6.24a22.708,22.708,0,0,1-16.2-6.36,20.342,20.342,0,0,1-6.36-14.88,21.941,21.941,0,0,1,6.36-15.72A23.053,23.053,0,0,1,627.12-61.68Zm57.36-18.36V0h20.76V-30.72L725.16,0h25.8L725.88-32.76a22.421,22.421,0,0,0,11.04-5.52c3.96-3.84,6.36-9.84,6.36-16.68,0-6.36-2.28-13.32-6.84-18-5.88-6.12-13.56-7.08-19.56-7.08Zm20.76,16.08h3.96c4.56,0,8.04,1.2,9.96,3.12a9.438,9.438,0,0,1,2.76,6.72,9.965,9.965,0,0,1-2.64,6.72c-2.52,2.4-6.96,3.24-10.08,3.24h-3.96Zm75.24-16.08H759.72V0h20.76V-34.68L807.6,0h26.88L799.8-42.12l31.8-37.92H805.92l-25.44,33Z" transform="translate(183 425.84)"/>
            </g>
          </svg>
          
        </span>
        <span class="ja">ステップバイワーク</span>
      </h1>
      <div class="title dummy">
        <span class="en">
          <svg xmlns="http://www.w3.org/2000/svg" width="829.68" height="83.64" viewBox="0 0 829.68 83.64">
            <g id="グループ_3" data-name="グループ 3" transform="translate(-187.8 -344)">
              <path class="step" id="パス_2" data-name="パス 2" d="M4.8-7.2A55.881,55.881,0,0,0,16.92-.84,42.782,42.782,0,0,0,32.64,1.8c8.52,0,16.8-1.32,23.64-8.16,5.76-5.76,7.56-12.84,7.56-20.16,0-5.52-1.08-9.96-5.16-14.28-4.2-4.56-9.48-6.36-14.52-7.92L37.8-50.64c-4.92-1.44-6.36-2.88-6.96-3.6a5.354,5.354,0,0,1-1.08-3.6,5.923,5.923,0,0,1,2.04-4.32,9.968,9.968,0,0,1,6.84-2.4c2.76,0,7.44.48,13.68,5.4l8.28-16.2c-7.56-3.96-16.8-6.48-24.72-6.48-9.72,0-16.44,3.48-20.52,7.56C11.88-70.8,8.04-64.8,8.04-54.96c0,4.08.48,9.72,4.56,14.16,3.24,3.6,8.16,5.4,11.52,6.48l5.4,1.68c5.16,1.56,8.28,2.4,10.32,4.2a6.253,6.253,0,0,1,2.28,4.8,7.158,7.158,0,0,1-2.04,5.04c-1.32,1.44-3.84,2.76-8.04,2.76-7.2,0-13.92-3.96-18.36-8.16ZM124.2-62.4V-80.04H69.36V-62.4H86.4V0h20.76V-62.4Zm54.72-17.64H133.44V0h45.48V-17.64H154.2v-13.8h23.4V-49.08H154.2V-62.4h24.72Zm47.04,53.52c6.24,0,13.68-.84,19.92-6.96s7.08-13.56,7.08-19.92c0-6.72-1.2-13.44-7.44-19.44-6.12-5.88-13.32-7.2-20.28-7.2H192.12V0h20.76V-26.52ZM212.88-63.24h7.08c2.64,0,6.48.36,8.88,2.88,2.16,2.16,2.4,5.04,2.4,7.2,0,1.92-.12,5.16-2.64,7.32-2.52,2.28-6.6,2.52-8.76,2.52h-6.96ZM325.32,0c9.84,0,17.4-3.12,21.72-7.56,3-3,5.88-8.16,5.88-15.72,0-6.36-2.16-11.52-5.4-14.64a19.9,19.9,0,0,0-10.92-4.8,12.6,12.6,0,0,0,6.48-6.24,20.745,20.745,0,0,0,2.28-9.84c0-7.08-2.16-12-4.92-15-4.92-5.4-11.76-6.24-17.52-6.24H291.96V0Zm-12.6-64.08h3.84c4.08,0,6.6,1.08,7.92,2.4a8.228,8.228,0,0,1,1.92,5.4A7.754,7.754,0,0,1,324.48-51c-2.16,2.28-5.76,2.52-7.92,2.52h-3.84Zm0,31.08h4.32c5.16,0,10.32.12,12.84,2.64a8.134,8.134,0,0,1,2.04,5.76,7.786,7.786,0,0,1-1.68,5.16c-2.28,2.64-7.08,3.24-12.84,3.24h-4.68ZM379.2,0h20.88V-38.4l29.88-41.64h-25.2L390.24-58.2,375.12-80.04H350.28L379.2-38.4Z" transform="translate(183 425.84)"/>
              <path class="work" id="パス_1" data-name="パス 1" d="M456.48-80.04,480.36,0h21.12l15.36-46.32L531.36,0H552.6l25.56-80.04H556.44L541.32-28.32,525.6-80.04H509.04L492.12-28.32,478.2-80.04Zm214.8,40.08a41.4,41.4,0,0,0-12.6-30c-8.16-7.8-19.68-11.88-31.56-11.88s-23.4,4.08-31.56,11.88a41.4,41.4,0,0,0-12.6,30,41.532,41.532,0,0,0,12.6,29.88c8.16,7.8,19.68,11.88,31.56,11.88s23.4-4.08,31.56-11.88A41.532,41.532,0,0,0,671.28-39.96ZM627.12-61.68a23.959,23.959,0,0,1,16.08,6.36,21.6,21.6,0,0,1,6.48,15.36A22.04,22.04,0,0,1,643.2-24.6c-3.72,3.72-9,6.24-16.08,6.24a22.708,22.708,0,0,1-16.2-6.36,20.342,20.342,0,0,1-6.36-14.88,21.941,21.941,0,0,1,6.36-15.72A23.053,23.053,0,0,1,627.12-61.68Zm57.36-18.36V0h20.76V-30.72L725.16,0h25.8L725.88-32.76a22.421,22.421,0,0,0,11.04-5.52c3.96-3.84,6.36-9.84,6.36-16.68,0-6.36-2.28-13.32-6.84-18-5.88-6.12-13.56-7.08-19.56-7.08Zm20.76,16.08h3.96c4.56,0,8.04,1.2,9.96,3.12a9.438,9.438,0,0,1,2.76,6.72,9.965,9.965,0,0,1-2.64,6.72c-2.52,2.4-6.96,3.24-10.08,3.24h-3.96Zm75.24-16.08H759.72V0h20.76V-34.68L807.6,0h26.88L799.8-42.12l31.8-37.92H805.92l-25.44,33Z" transform="translate(183 425.84)"/>
            </g>
          </svg>
          
        </span>
        <span class="ja">ステップバイワーク</span>
      </div>
      <p class="text">ホームページを通じて、本当に良いモノ・正しいコトが選ばれるインターネットを<br>
        目指すことがステップバイワークの事業テーマです。</p>
      <div class="btn">
        <a href="">わたしたちについて</a>
      </div>
    </div>
  </section>
  <script src="assets/js/main.js"></script>
</body>
</html>

@use "../foundation/f-mixin" as *;
@use "../foundation/f-variables" as *;
body {
  height: 500vh;
}
.sec01 {
  height: 100vh;
  height: 100svh;
  text-align: right;
  img {
    object-fit: cover;
    height: 100%;
    width: calc(50% + 60px);
  }
}
.sec02 {
  height: 100vh;
  height: 100svh;
  padding: 100px 0;
  display: flex;
  align-items: center;
  background: url(../../images/bg2.jpg) center no-repeat;
  background-size: cover;
  .inner {
    max-width: 1000px;
    width: calc(100% - 40px);
    margin: 0 auto;
    position: relative;
  }
  .title {
    display: flex;
    flex-direction: column;
    gap: 34px;
    margin-bottom: 50px;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    max-width: 100%;
    padding-right: 20px;
    &.active {
      position: absolute;
      top: 0;
      transform: none;
    }
    .en {
      width: 830px;
      max-width: 100%;
      path {
        transition: fill 0.3s ease;
      }
      .step {
        fill: black;
      }
      .work {
        fill: white;
      }
      &.active {
        .step {
          fill: white;
        }
      }
    }
    .ja {
      font-size: 30px;
      font-weight: bold;
      color: black;
      transition: color 0.3s ease;
      &.active {
        color: white;
      }
    }
    &.dummy {
      position: static;
      opacity: 0;
      transform: none;
      padding-right: 0;
    }
  }
  .text {
    color: white;
    font-size: 20px;
    line-height: 2;
    letter-spacing: 0.08em;
  }
  .btn {
    margin-top: 50px;
    a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid white;
      color: white;
      height: 50px;
      font-size: 20px;
      line-height: 2;
      letter-spacing: 0.08em;
      padding: 0 20px;
    }
  }
}

Xにポストする

Facebookで共有 B! ブックマークする

コピーする