Добрый день. Прошу помочь. Пытаюсь встроить простой код с элементами sticky в главную страницу или на любую страницу вообще. <div class="card-container"> <div class="scroll-card" id="card1"> <h2>Card 1</h2> </div> <div class="scroll-card" id="card2"> <h2>Card 2</h2> </div> <div class="scroll-card" id="card3"> <h2>Card 3</h2> </div> </div> <style> .card-container { padding: 20px; position: relative; } .scroll-card { width: 100%; height: 300px; margin-bottom: 20px; border-radius: 150px; transition: transform 0.3s ease; } .scroll-card h2 { top: 20px; left: 20px; color: #000000; position:absolute; } #card1 { background-color: #ff6347; position: -webkit-sticky; position: sticky; top: 0px; z-index:0; } #card2 { background-color: #4682b4; position: -webkit-sticky; position: sticky; top: 40px; z-index:1; } #card3 { background-color: #32cd32; position: -webkit-sticky; position: sticky; top: 80px; z-index:2; } </style> Всё просто, карточки складываются при помощи sticky от верха страницы, но на фронтенде ничего не происходит. Тестировал код на Codepen там работает, даже в html редакторе opencart при добавлении кода работает, а после сохранения на странице нет. Подскажите куда копать? Никакого кеша нет. сайт: https://purestone-diamond.com
Не помогает никто из за скудного описания. Вы где то нашли кусок кода. Который там где был взят , работает. Внедрили у себя и он не производит нужного эффекта. Здесь же варианты разные Ваши стили основные в магазине, имеют приоритет . Верстка использует некие схожие классы, которые уже используются. Итд итп. Видимо более верно было озвучить замысел и привести пример того, где это работает.
Этот код написал я, классы не повторяются, если зайдёте в консоль разработчика на сайте, то увидите, что всё корректно со стилями. Смысл в том, что при скроллинге карточки собираются в колоду при помощи sticky https://codepen.io/msgor86/pen/ExBQVBo. Проблема в том, что эти стили, а конкретно sticky не отрабатывается на фронтенде. Прикрепил скрин где он корректно работает даже в визуальном редакторе, а на фронте нет. Причём не важно где я его размещаю: в описании товара, на странице, в модуле, где угодно. Никакие кеши на сайте не используются
Проверьте, что ни один из родительских классов выше в дереве DOM не имеет overflow:hidden; Чуть позже с компа посмотрю.