containsメソッド

文字列に引数で指定した文字列が含まれるか判定するメソッドです。文字列が引数に指定した文字列を含む場合は true を、含まない場合は false を返します。第 2 引数には文字列の測定の開始位置を指定することができます。

使用例:

class Onclick {
  constructor() {
    this.DOM = {};
    this.DOM.btn = document.querySelector(".mobile-menu__btn");
    this.DOM.container = document.querySelector("#global-container");
    this._addEvent();
  }

  _toggle() {
    const body = document.body;
    this.DOM.container.classList.toggle("menu-open");

    if (this.DOM.container.classList.contains("menu-open")) {
      // menu-open クラスがあるときにスクロールを無効化
      body.style.overflow = "hidden";
    } else {
      // menu-open クラスがないときにスクロールを有効化
      body.style.overflow = "auto";
    }
  }

  _addEvent() {
    this.DOM.btn.addEventListener("click", this._toggle.bind(this));
  }
}

このコードは、ハンバーガーメニューを実装するものです。重要な点は、`if (this.DOM.container.classList.contains(“menu-open”))` という部分にあります。これは、サイトの親要素である `global-container` に `menu-open` クラスが付与されているかどうかを判定し、もしそうであればクリックイベントを通じてメニューの開閉を制御する機能を実装しています。

このコードは、ウェブページ上でメニューの開閉を切り替えるJavaScriptの関数です。_toggle()関数は、特定のHTML要素（this.DOM.container）にmenu-openクラスを追加したり削除したりすることにより、メニューが開いているか閉じているかの状態をトグルしています。

メニューが開かれた時（menu-openクラスが存在する時）、スクロールを無効にするためにbody要素のstyle.overflowをhiddenに設定します。メニューが閉じられた時（menu-openクラスが存在しない時）、スクロールを再び有効にするためにbody要素のstyle.overflowをautoに設定します。これにより、メニューが開いている間はページの他の部分をスクロールできなくなり、メニューが閉じれば再びスクロールできるようにする内容です。

※上記のように条件分岐と組み合わせることにより様々な要件に対応することが可能です。

offsetHeight

アニメーションを実装する際に、特定の要素が画面の上部、中央、または下部にスクロールされた時にイベントを発火させる必要がある場合があります。それを実行してくれるプロパティになります。

これは要素の可視領域の高さをピクセル単位で取得するために使用され、CSSの高さとパディング、スクロールバー（もし表示されている場合）、および境界線の厚さを含みますが、マージンは含まれません。offsetHeightは読み取り専用のプロパティで、JavaScriptを使って要素の現在のレイアウトに基づいた計算された高さを提供します。

使用例：

_headerActive() {
    // スクロールイベントを監視する
    window.addEventListener("scroll", function () {
      // 現在のスクロール位置を取得する
      var scrollPosition = window.scrollY || document.documentElement.scrollTop;

      // メインビジュアルの高さを取得する
      var mainVisualHeight = document.getElementById("hero").offsetHeight;

      // #global-containerに.menu-openが存在するかチェックする
      var globalContainer = document.getElementById("global-container");
      var isMenuOpen = globalContainer.classList.contains("menu-open");

      // スクロール位置がメインビジュアルの高さよりも大きく、かつ.menu-openが存在しない場合
      if (scrollPosition > mainVisualHeight && !isMenuOpen) {
        document.getElementById("header").style.top = "0";
      } else if (isMenuOpen) {
        // スクロール位置がメインビジュアルの高さ以下かつ.menu-openが存在する場合は何もしない
        document.getElementById("header").style.top = "0";
      } else {
        // スクロール位置がメインビジュアルの高さ以下、または.menu-openが存在しない場合は元のスタイルに戻す
        document.getElementById("header").style.top = "";
      }
    });
  }

このコードは、ウェブページのスクロールに応じてヘッダーの表示を切り替えるJavaScript関数_headerActiveです。以下の機能を実行します。

window.addEventListener(“scroll”, function () {…})でスクロールイベントを監視します。
var scrollPosition = window.scrollY || document.documentElement.scrollTop;で現在のスクロール位置を取得します。
var mainVisualHeight = document.getElementById(“hero”).offsetHeight;でメインビジュアル（idが”hero”の要素）の高さを取得します。
var globalContainer = document.getElementById(“global-container”);でidが”global-container”の要素を取得し、var isMenuOpen = globalContainer.classList.contains(“menu-open”);でメニューが開いているか（”menu-open”クラスがあるか）を確認します。

スクロール位置がメインビジュアルの高さよりも大きく、メニューが開いていない場合、ヘッダー（idが”header”の要素）のstyle.topを”0″に設定して画面上部に固定します。
スクロール位置がメインビジュアル以下でメニューが開いている場合は、ヘッダーの位置を変更しません（style.topを”0″に設定）。
上記の条件に当てはまらない場合（スクロール位置がメインビジュアル以下でメニューが閉じている場合）、ヘッダーのstyle.topを空文字に設定して元のスタイルに戻します。