Фиксированная панель навигации

Предварительный просмотр

Имитирует фиксированный навигатор Glassmorphic с прокруткой. Нажмите кнопку в предварительном просмотре, чтобы увидеть эффект прокрутки.

Варианты использования и функции

• Целевая страница/Портфолио: выражение лица навигатора меняется при прокрутке, что придает ему ощущение продуманности.

• Подходит для темных тем: фильтр фона Glassmorphism: размытие выглядит особенно хорошо на темном фоне.

• Использование позиции: липкий. Максимизируйте производительность, используя позицию: липкий в CSS, а не полагаясь только на JavaScript.

##Точки дизайна и UX

1. Срабатывает при прокрутке на 10 пикселей: Стеклянный морфизм появляется в нейтральное время.

2. Изменение отступов: уменьшено с «1,25 rem» до 0,75 rem, чтобы сделать его более компактным и обеспечить более широкую область содержимого.

3. Сглаживание с помощью transition: создавайте естественные изменения, одновременно изменяя четыре свойства фона: размытие, тень блока и отступы.

Как настроить

Изменить порог начала прокрутки:

// запуск раньше (5 пикселей)

if (demo.scrollTop > 5) { ... }



// запуск позже (50 пикселей)

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>

Статус совместимости браузера

| Браузер | Статус совместимости |

|--------|-------|

| Хром 76+ | ✅ Полностью совместим |

| Firefox 103+ | ✅ Совместимость |

| Сафари 9+ | ✅ Полностью совместим |

| Край 79+ | ✅ Полностью совместим |

backdrop-filter не поддерживается некоторыми старыми браузерами, но полупрозрачного фона background: rgba(...) достаточно в качестве запасного варианта.