https://shop.lesportsac.co.jp/Js/m_calculateHeaderHeight.js

1/**
2 * ヘッダーの高さを取得してカスタムプロパティにセットする
3 * @returns {void}
4 */
5export function calculateHeaderHeight() {
6  /**
7   * ヘッダーのセレクタ
8   * @type {string}
9   */
10  const headerSelectorString = '#header';
11
12  /**
13   * ティッカーのセレクタ
14   * @type {string}
15   */
16  const tickerSelectorString = '.js-newsticker-head';
17
18  /**
19   * CSS変数のプロパティ名
20   */
21  const headerProperty = '--header-full-height';
22  const tickerProperty = '--ticker-full-height';
23
24  /**
25   * DOM取得
26   */
27  const headerElement = document.querySelector(headerSelectorString);
28  const tickerElement = document.querySelector(tickerSelectorString);
29
30  /**
31   * 高さ取得とCSS変数の設定
32   */
33  if (headerElement) {
34    const headerHeight = headerElement.clientHeight;
35    document.documentElement.style.setProperty(headerProperty, `${headerHeight}px`);
36  }
37
38  if (tickerElement) {
39    const tickerHeight = tickerElement.clientHeight;
40    document.documentElement.style.setProperty(tickerProperty, `${tickerHeight}px`);
41  }
42}