Как внедрить Sticky Ads на свой сайт?

В этой статье мы узнаем, как реализовать Sticky Ads на нашем веб-сайте. Мы можем добавить липкий элемент на веб-страницу, используя различные плагины jQuery. Мы будем использовать плагин jQuery sticky-kit.

Подход: давайте посмотрим, поможет ли нам плагин sticky-kit сделать HTML-элемент привязанным к своему родителю. Таким образом, мы можем прикрепить HTML-элемент div к его родительскому элементу, а в дочернем div мы разместим нашу рекламу. Дочерний тег div будет прикреплен к его родительскому элементу, пока мы будем прокручивать веб-сайт.

Во-первых, мы должны добавить ссылки CDN для плагина jQuery и sticky-kit jQuery в тег заголовка HTML-файла.

CDN-ссылки:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js”  crossorigin=”anonymous” referrerpolicy=”no-referrer”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js”  crossorigin=”anonymous” referrerpolicy=”no-referrer”></script>

Пример 1. В этом примере мы собираемся создать веб-страницу из трех разделов, содержащую заголовок, основную часть и нижний колонтитул. В основной части мы добавим раздел div, в котором будет реализована функция закрепления. Он будет придерживаться его при прокрутке страницы. Мы можем видеть это в выводе следующего кода.

Выход :

Пример 2. Давайте посмотрим на липкую рекламу в действии на другом интерактивном примере. В этом случае мы используем два объявления для демонстрационной веб-страницы рядом друг с другом, а родительский элемент для этих объявлений находится в теге body, поэтому они полностью отделены от остальной части HTML-элемента.

Выход: