スクロールでガラスモーフィズムの固定ナビガーをシミュレートします。プレビュー内のボタンをクリックするとスクロール効果が確認できます。
ランディングページ・ポートフォリオ: スクロールによってナビガーが表情を変えることで作り込み感を演出。
ダークテーマに最適: ガラスモーフィズムの backdrop-filter: blur が特にダーク背景で映える。
position: sticky 活用: JavaScriptだけに頼るのではなく、CSSの position: sticky を活用してパフォーマンスを最大化。
スクロール10pxで発火: ニュートラルなタイミングでガラスモーフィズムが現れる。
paddingの変化: 1.25rem → 0.75rem の縮小でコンパクトになり、コンテンツ領域を広く確保。
transition でスムーズに: background・blur・box-shadow・paddingの4プロパティを同時にトランジションさせることで自然な変化。
スクロール開始しきい値を変える:
// トリガーを早めに (5px)
if (demo.scrollTop > 5) { ... }
// トリガーを遅く (50px)
if (demo.scrollTop > 50) { ... }
リンクを追加する:
<li><a href="#services">サービス</a></li>
<li><a href="#blog">ブログ</a></li>
<nav class="snav-bar" id="sticky-nav">
<div class="snav-logo">BRAND</div>
<ul class="snav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
</ul>
<button class="snav-cta">Contact</button>
</nav>
<style>
.snav-bar {
position: sticky;
top: 0;
z-index: 100;
width: 100%;
box-sizing: border-box;
padding: 1.25rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.snav-bar.scrolled {
background: rgba(15,23,42,0.75);
backdrop-filter: blur(16px);
box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.4);
padding: 0.75rem 2rem;
}
</style>
<script>
window.addEventListener('scroll', function() {
var nav = document.getElementById('sticky-nav');
if (window.scrollY > 10) nav.classList.add('scrolled');
else nav.classList.remove('scrolled');
});
</script>| ブラウザ | 対応状況 |
|--------|--------|
| Chrome 76+ | ✅ 完全対応 |
| Firefox 103+ | ✅ 対応 |
| Safari 9+ | ✅ 完全対応 |
| Edge 79+ | ✅ 完全対応 |
backdrop-filterは一部古いブラウザで未対応ですが、フォールバックとしてbackground: rgba(...)の半透明背景だけで十分機能します。