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