@media (min-width: 1001px) { #id12e3jrq_0 { transition: all 0.5s ease-in-out !important; position: relative; /* Пока он просто на месте */ z-index: 100; } /* 2. СОСТОЯНИЕ ПРИ СКРОЛЛЕ (СТИКИ) */ #id12e3jrq_0.sticky { /* ЭФФЕКТ БЛУРА (ПОЛУПРОЗРАЧНЫЙ ФОН + РАЗМЫТИЕ) */ background-color: rgba(255, 255, 255, 0.1) !important; /* Белый цвет, 10% непрозрачности */ backdrop-filter: blur(12px) !important; /* Размытие заднего плана */ -webkit-backdrop-filter: blur(12px) !important; /* Поддержка для Safari */ border-radius: 70px !important; position: fixed !important; top: 20px !important; /* Секрет равномерного уменьшения: */ width: 90% !important; /* Ширина в уменьшенном состоянии */ left: 0 !important; right: 0 !important; margin: 0 auto !important; /* Центрирует блок по горизонтали */ z-index: 9999 !important; box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important; } /* <-- Закрыли селектор .sticky (в исходном коде её не было) */ /* Анимация появления */ @keyframes slideIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } } /* Закрытие @media */ window.addEventListener('scroll', function() { // ID вашего черного блока var header = document.getElementById('id12e3jrq_0'); // ID секции, ПОСЛЕ которой он должен приклеиться (например, вторая секция) var triggerSection = document.getElementById('iwyojymny_0'); if (header && triggerSection) { // Вычисляем, где заканчивается вторая секция var triggerPoint = triggerSection.offsetTop + triggerSection.offsetHeight; if (window.scrollY > triggerPoint) { header.classList.add('sticky'); } else { header.classList.remove('sticky'); } } });