← 動的パーツギャラリーへ戻る

パーツ番号 03-14-08 ・ JavaScript使用

スクロール連動 省略⇔展開パンくず

ページをスクロールすると、パンくずが「…」+現在地のみの省略表示に切り替わり、上部に戻ると全階層表示に戻ります。WordPressの固定ヘッダー内パンくずの省スペース化に有効です。

scrolljs

プレビュー

ソースコード

HTML

<div class="d03-14-08-stage">
          <div class="d03-14-08-bc">
            <span class="d03-14-08-full">
              <a href="#" onclick="return false">ホーム</a><span class="d03-14-08-sep">›</span>
              <a href="#" onclick="return false">サービス</a><span class="d03-14-08-sep">›</span>
              <a href="#" onclick="return false">Web制作</a><span class="d03-14-08-sep">›</span>
            </span>
            <button type="button" class="d03-14-08-ellipsis">…</button>
            <span class="d03-14-08-sep d03-14-08-sep-c">›</span>
            <span class="d03-14-08-current">料金プラン</span>
          </div>
          <div class="d03-14-08-scroll">
            <div class="d03-14-08-body">
              <p>↓ この領域をスクロール</p>
              <div class="d03-14-08-block"></div>
              <div class="d03-14-08-block"></div>
              <div class="d03-14-08-block"></div>
            </div>
          </div>
        </div>

CSS

.prev.d03-14-08{padding:0;display:block}
        .d03-14-08-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f8fafc}
        .d03-14-08-bc{
          position:absolute;top:0;left:0;right:0;z-index:2;
          display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden;
          height:48px;padding:0 16px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);
          font-size:12.5px;
        }
        .d03-14-08-bc a{color:#475569;text-decoration:none;font-weight:600;white-space:nowrap}
        .d03-14-08-bc a:hover{color:#2563eb}
        .d03-14-08-sep{color:#94a3b8;font-size:11px}
        .d03-14-08-current{color:#0f172a;font-weight:700;white-space:nowrap}
        .d03-14-08-full{display:inline-flex;align-items:center;gap:6px;overflow:hidden;transition:opacity .3s ease}
        .d03-14-08-ellipsis{
          display:none;border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;
          font-size:11px;font-weight:700;border-radius:999px;width:24px;height:20px;line-height:1;
          font-family:inherit;
        }
        .d03-14-08-sep-c{display:none}
        .d03-14-08-stage.compact .d03-14-08-full{display:none}
        .d03-14-08-stage.compact .d03-14-08-ellipsis,.d03-14-08-stage.compact .d03-14-08-sep-c{display:inline-flex}
        .d03-14-08-scroll{position:absolute;inset:0;overflow-y:auto;padding-top:48px}
        .d03-14-08-body{padding:16px}
        .d03-14-08-body p{font-size:12px;color:#64748b;margin:0 0 12px;text-align:center}
        .d03-14-08-block{height:80px;border-radius:8px;margin-bottom:12px;background:linear-gradient(135deg,#e2e8f0,#cbd5e1)}

JavaScript

(function(){
        var stage=document.querySelector('.d03-14-08-stage');
        if(!stage)return;
        var scroller=stage.querySelector('.d03-14-08-scroll');
        scroller.addEventListener('scroll',function(){
          stage.classList.toggle('compact',scroller.scrollTop>30);
        });
      })();

クラス名 .d03-14-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。