Untitled

 avatar
unknown
html
3 years ago
8.9 kB
2
Indexable
<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>Full Page Header</title>
  <link
    href="https://fonts.googleapis.com/css?family=Quicksand"
    rel="stylesheet"
  />
  <link rel="stylesheet" href="main.css" />
</head>

<body>
  <header class="header">
    <div class="u-contered">
      <div class="call-to-action">
        <h1 class="call-to-action__title">
          <p class="call-to-action__description">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum
            tempore recusandae voluptatem perferendis nesciunt quibusdam animi?
            Fugit possimus quis tempora iure id unde illo asperiores excepturi,
            sequi tenetur culpa recusandae!
          </p>

          <button class="call-to-action__button" type="button">
            Sing me up!
          </button>
        </h1>
      </div>
    </div>
  </header>

  <div class="bar bar--bg">
    <div class="bar__content u-contered">
      <img
        class="bar__logo"
        src="data:image/jpeg;base64,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"
        alt="gameIcon"
      />
      <input type="checkbox" id="inpNavToggle" />
      <label class="bar__nav-toggle" for="inpNavToggle">
        <i class="material_icons"> menu </i>
      </label>
      <nav class="nav">
        <a class="nav__link" href="#">Tutorial</a>
        <a class="nav__link" href="#">Tutorial</a>
        <a class="nav__link" href="#">Tutorial</a>
        <a class="nav__link" href="#">Tutorial</a>
      </nav>
    </div>
  </div>
  <main class="u-contered" style="padding: 30px; font-weight: 500;">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem saepe,
      voluptatum, doloremque eveniet inventore ipsa nihil fugiat minus quaerat
      debitis quam animi libero? Adipisci numquam velit, delectus animi
      accusantium doloremque.
    </p>
  </main>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const observer = new IntersectionObserver((entries) => {
        console.log(entries[0].intersectionRatio)
        document.querySelector(".bar").classList.toggle('bar--bg', entries[0].intersectionRatio < 0.9)
      }, {
        threshold: 0.9,
      });

      console.log(document.querySelector(".header"))

      observer.observe(document.querySelector(".header"));
    });
  </script>
</body>
Editor is loading...