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");
      }
    });
  });
});

acfで画像フィールドが複数あり、返り値がidの場合の出力

room_img1～room_img6まで画像フィールドがある場合
※画像サイズは複数（largeとthumbnail）に対応

<?php
$size_large = 'large';
$size_thumb = 'thumbnail';

$images = [];

for ($i = 1; $i <= 6; $i++) {
    $field = 'room_img' . $i;
    $attachment_id = get_field($field);

    if ($attachment_id) {
        $image_large = wp_get_attachment_image_src($attachment_id, $size_large);
        $image_thumb = wp_get_attachment_image_src($attachment_id, $size_thumb);
        $attachment = get_post($attachment_id);
        $alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
        $caption = get_the_excerpt($attachment);

        // 念のため画像URLが取得できているかも確認
        if ($image_large && $image_thumb) {
            $images[] = [
                'large' => $image_large[0],
                'thumb' => $image_thumb[0],
                'alt' => esc_attr($alt),
                'caption' => esc_html($caption)
            ];
        }
    }
}
?>

テンプレートの出力部はswiperでスライドさせる場合

<div class="swiper-wrapper">
<?php foreach ($images as $img): ?>
    <div class="swiper-slide">
        <img src="<?php echo $img['src']; ?/>" alt="<?php echo $img['alt']; ?>" title="<?php echo $img['caption']; ?>">
        <?php if ($img['caption']): ?>
            <span><?php echo $img['caption']; ?></span>
        <?php endif; ?>
    </div>
<?php endforeach; ?>
</div><!--/.swiper-wrapper-->

(続きを読む…)

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

$('.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;
*/