Как зафиксировать кнопку наверху страницы при прокрутке

Опубликовано 20 Ноябрь, 2024 | Сниппеты с кодом | 93 просмотров

Если вам нужно, чтобы кнопка на вашем сайте отображалась на своем месте, пока она видима, а затем фиксировалась наверху при прокрутке, воспользуйтесь этим простым решением на JavaScript.

1. Подготовьте кнопку для фиксации

   Для начала, выберите кнопку, которую хотите зафиксировать при прокрутке страницы и скопируйте ее ID. В данном примере кнопка имеет ID block_385348. Мы используем этот ID для отслеживания положения кнопки.

2. Добавьте JavaScript код для управления фиксированием в новый HTML блок

   Вам нужно добавить следующий JavaScript код на вашу страницу, чтобы реализовать фиксацию кнопки:

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        const buttonId = 'block_385348';
        const originalButton = document.getElementById(buttonId);
        const clonedButton = originalButton.cloneNode(true);
        clonedButton.id = 'fixed_' + buttonId;
        clonedButton.style.position = 'fixed';
        clonedButton.style.top = '0';
        clonedButton.style.left = '50%';
        clonedButton.style.transform = 'translateX(-50%)';
        clonedButton.style.width = originalButton.clientWidth + 'px';
        clonedButton.style.display = 'none';
        clonedButton.style.zIndex = '999';
        clonedButton.style.margin = '10px 0';
        document.body.appendChild(clonedButton);

        window.addEventListener('scroll', function() {
            const rect = originalButton.getBoundingClientRect();
            if (rect.top <= 0) {
                clonedButton.style.display = 'block';
            } else {
                clonedButton.style.display = 'none';
            }
        });
    });
</script>

Теперь, используя этот код, ваша кнопка будет всегда оставаться видимой в верхней части страницы, когда пользователь прокручивает вниз, что может помочь улучшить взаимодействие с пользователями и повысить конверсию.