HTMLでのカスタムスクロールスパイ – HTMLで始めるホームページ作成

カスタムスクロールスパイの仕組み

まず、スクロールスパイの基本的な仕組みを理解しましょう。スクロールスパイは、ページの現在のスクロール位置を元に、該当するコンテンツセクションにナビゲーションが一致するようにする技術です。

必要なHTMLコード

以下のコードは、シンプルなスクロールスパイを実装するための基本的なHTML構造です。

<nav>
  <ul>
    <li><a href="#section1" rel="nofollow" target="_blank" title="セクション1" aria-label="セクション1">セクション1</a></li>
    <li><a href="#section2" rel="nofollow" target="_blank" title="セクション2" aria-label="セクション2">セクション2</a></li>
    <li><a href="#section3" rel="nofollow" target="_blank" title="セクション3" aria-label="セクション3">セクション3</a></li>
  </ul>
</nav>

<section id="section1" role="group">
  <h2 class="wp-block-heading">セクション1のタイトル</h2>
  <p>セクション1のコンテンツ。</p>
</section>

<section id="section2" role="group">
  <h2 class="wp-block-heading">セクション2のタイトル</h2>
  <p>セクション2のコンテンツ。</p>
</section>

<section id="section3" role="group">
  <h2 class="wp-block-heading">セクション3のタイトル</h2>
  <p>セクション3のコンテンツ。</p>
</section>

実装方法

スクロールスパイを実現するには、JavaScriptを使用してページのスクロール位置を監視し、対応するナビゲーション項目をハイライトします。例えば、以下のようなスクリプトを追加することが考えられます。

const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('nav a');

window.addEventListener('scroll', () => {
  let current = '';

  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    if (pageYOffset >= sectionTop - 60) {
      current = section.getAttribute('id');
    }
  });

  navLinks.forEach(link => {
    link.classList.remove('active');
    if (link.getAttribute('href') === '#' + current) {
      link.classList.add('active');
    }
  });
});

まとめ

以上の方法により、カスタムスクロールスパイを簡単に実装することができます。さらに、CSSを使用して見た目をカスタマイズすることで、より魅力的なナビゲーションを提供できます。ぜひ、自身のプロジェクトに取り入れてみてください。