【Vanilla JS】スクロール途中でコンテンツを画面上部に固定しながらアイテムを切り替える

[ ID : 11206 ]
シルバー
【Vanilla JS】スクロール途中でコンテンツを画面上部に固定しながらアイテムを切り替える
実装目安
3分

概要

スクロール途中で対象コンテンツが画面上部に固定され、さらにスクロールするとスクロール量に応じてコンテンツのアイテムが切り替わる。

用途・要件

  • 対象コンテンツまでスクロールすると、コンテンツが画面上部に固定する。(position: sticky; 使用)
  • さらに各アイテムの高さ(100vh * アイテム数)分スクロールすると、対応するアイテムに切り替わる。(DEMOでは3つのアイテムに切り替わる)
  • アクティブなアイテム要素にis-activeクラスを付与する。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

関連記事

全ての記事を見る

KONOCODEのメリット 無料会員登録