kdcsライブラリー

jQueryを使わない「スクロールでナビ固定」
ページトップから一定量スクロールした時点で複製したナビ（クローン）をページ上部に固定表示する方法

2025.9.17 改訂
※firefoxでページ途中の#hogeにアンカーリンクで移動する際、固定ナビが出ないのを修正（遅延チェックの部分）

var cloneNav = document.getElementById('nav');
var cloned = cloneNav.cloneNode(true);
var showClass = 'is-show';
cloned.classList.add('clone-nav');
document.body.appendChild(cloned);

// スクロール時の表示制御
function toggleNavVisibility() {
  if (window.scrollY > 500) {
    cloned.classList.add(showClass);
  } else {
    cloned.classList.remove(showClass);
  }
}

// ページ読み込み後にもチェック（Firefox対策）
window.addEventListener('DOMContentLoaded', function() {
  setTimeout(toggleNavVisibility, 100); // 遅延チェック
});

// スクロールイベントでもチェック
window.addEventListener('scroll', toggleNavVisibility);

css

/* スクロールnav固定 css -------------------------*/
.clone-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    width: 100%;
    transition: .2s;
    transform: translateY(-100%);
    opacity: 0.9;
}
.is-show {
    transform: translateY(0) !important;
    opacity: 0.9 !important;
}

改訂前のコード

//PCナビ スクロール固定 jQuery不要----------------------------------------------

var cloneNav = document.getElementById('nav');
var cloned = cloneNav.cloneNode(true);
var showClass = 'is-show';
cloned.classList.add('clone-nav');
document.body.appendChild(cloned);

window.addEventListener('scroll', function() {
  if(window.scrollY > 500 ) {
    cloned.classList.add('is-show');
  } else {
    cloned.classList.remove('is-show');
  }
});

レスポンシブでスマホ状態になった時、トップページのメインビジュアルをスクロールで通過したらヘッダーにクラスを付与して背景色を付ける方法をjQuery版と非jQuery（バニラjs）で記述したもの。

まず初めに横幅が780pxより広い場合、id=”header”に”pc”というクラスを付け、横幅780px以下でid=”header”に”mobile”というクラスを付ける記述で、こちらはjQueryを使っていないバニラjs。

function updateHeaderClass() {
  const header = document.getElementById("header");
  if (!header) return;

  if (window.innerWidth <= 780) {
    header.classList.add("mobileHeader");
    header.classList.remove("pc");
  } else {
    header.classList.add("pc");
    header.classList.remove("mobileHeader");
  }
}

// 初回の実行
updateHeaderClass();

// ウィンドウサイズ変更時にクラス更新
window.addEventListener("resize", updateHeaderClass);

これをもう少しスッキリとモダンにすると以下のようになる
※classList.toggle を使うと、条件に応じてクラスを追加・削除できる

const updateHeaderClass = () => {
  const header = document.getElementById("header");
  if (!header) return;

  const isMobile = window.innerWidth <= 780;
  header.classList.toggle("mobileHeader", isMobile);
  header.classList.toggle("pc", !isMobile);
};

updateHeaderClass();
window.addEventListener("resize", updateHeaderClass);

ここからが本題

jQuery版

$(function () {
  $(window).on('scroll', function () {
      if ($('#mvSlider').height() < $(this).scrollTop()) {
          $('.mobileHeader').addClass('bgColor');
    } else {
          $('.mobileHeader').removeClass('bgColor');
    }
  });
});

次に非jQuery版
スライダーでSwiperを使う場合jQueryが必要ないのでこちらを使う

document.addEventListener("DOMContentLoaded", function () {
  window.addEventListener("scroll", function () {
    const mvSlider = document.getElementById("mvSlider");
    const mobileHeaders = document.querySelectorAll(".mobileHeader");

    if (!mvSlider) return;

    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    const mvHeight = mvSlider.offsetHeight;

    mobileHeaders.forEach(header => {
      if (scrollTop > mvHeight) {
        header.classList.add("bgColor");
      } else {
        header.classList.remove("bgColor");
      }
    });
  });
});

リンク画像がスライド中に誤タップされるのを防ぎたい場合

$('.slick-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    $('.slick-slide a').css('pointer-events', 'none');
});
$('.slick-slider').on('afterChange', function(event, slick, currentSlide){
    $('.slick-slide a').css('pointer-events', 'auto');
});

acfで画像フィールドを多く使うと縦長になってしまうので、3枚ずつを横並びにする方法。
初めはflort:leftで並べたが、画像が全部埋まらないとレイアウトが崩れてしまう。
これら複数の画像フィールドをdivで囲んでflexboxで処理する方法。

※注意点は、advanced custom fieldsの仕様が変わると修正しなければならない可能性がある
※acf proを使えばこの方法は必要ない

javascript（ custom-admin-acf_img.js ）

// acfの「複数画像フィールド」をdivで囲む ----------------------------
jQuery(function($) {
  const fieldGroups = [
    { prefix: 'banquet_img', wrapperClass: 'img_wrapper_banquet' },
    { prefix: 'room_img', wrapperClass: 'img_wrapper_rooms' }
  ];

fieldGroups.forEach(group => {
  const $fields = $(`[data-name^="${group.prefix}"]`);
    if ($fields.length) {
      const $wrapper = $(`<div class="${group.wrapperClass}"></div>`);
    
    // 先に wrapper を挿入
      $fields.first().before($wrapper);
    
    // その後 wrapper にフィールドを append
      $fields.each(function() {
        $wrapper.append($(this));
      });
    }
  });
});

※先にwrapperのdivを挿入してから画像フィールドを中に入れるという順にしないとエラーになる

functions.php

// あらかじめjsフォルダ内にcustom-admin-acf_img.jsを作成しておく----------------------------
function custom_admin_scripts() {
    $screen = get_current_screen();
    if ($screen->post_type !== 'page') {
        wp_enqueue_script('custom-admin-acf_imgjs', get_template_directory_uri() . '/js/custom-admin-acf_img.js');
    }
}
add_action('admin_enqueue_scripts', 'custom_admin_scripts');

css ( custom-admin-acf.css )

/* 画像（floatで3列にする） */
div.img_wrapper_rooms,
div.img_wrapper_banquet {
  display: flex;
  flex-wrap: wrap;
}
div.acf-field-image {
  width: calc(100% / 3) !important;
  padding: 16px;
}


/* div.acf-field-imageにflexが使えない場合 */
/*
min-height: 320px !important;
float: left !important;
clear: initial !important;
*/

時間のある時に学習するための備忘録

パララックススライダーrendered.js修正前はスライド完了後にページネーションが更新されるようになっていたが、これをスライドと同じタイミングで動かしたい。

以下が修正のポイント

現在のコードでは、.pagination の check イベントがスライド完了後に trigger(‘check’) されて、そこで .item に is-active クラスが付与されます。つまり、アニメーションが終わった後にページネーションが更新される仕組みです。

スライドの動きと同時に is-active を付与するには？ slideshowSwitch 関数内で、アニメーションの開始直後に .pagination .item の is-active を更新するようにすれば、スライドと同時にページネーションも切り替わります。

以下のように、アニメーション開始前にページネーションの更新処理を追加します。

// スライド切り替えの直前にページネーションを更新
var index = newSlide.index();
pages.removeClass('is-active');
pages.eq(index).addClass('is-active');

このコードを slideshowSwitch 関数内の、アニメーション開始前（例えば TweenMax.to(…) の前）に追加してください。たとえば fade トランジションの場合はこのあたり。

if (transition == 'fade') {
  // ページネーションを即時更新
  var index = newSlide.index();
  pages.removeClass('is-active');
  pages.eq(index).addClass('is-active');

  newSlide.css({
    display: 'block',
    zIndex: 2
  });
  ...

同様に、fade 以外のスライドアニメーションでも、TweenMax.to(…) の前に同じ処理を入れればOKです。