Плавающий баннер для сайта

Сразу оговорюсь, что автор кода не я. Я нагло вытащил все составляющие с сайта-примера. Изначально он был для Telegram, а мне нужно было переделать его для ВК. И, чтобы не изобретать велосипед, я скопировал и адаптировал.

Как этот баннер выглядит вы можете видеть на картинке выше и вживую внизу страницы. При закрытии баннера он больше не показывается пользователю до завершения сессии. Если пользователь закроет окно, а потом снова зайдёт на сайт / страницу с баннером, баннер будет показан.

Вариантов применения подобного плавающего виджета много. Помимо призыва перейти и подписаться можно сделать из него уведомление о cookies или рассказать о каких-то важных нововведениях. Словом, решение довольно универсальное. Классы и идентификаторы только не забудьте поменять. Ну и в целом HTML можно немного упростить при желании.

HTML

Иконка VK вставлена с помощью <svg> прямо в код. Также не забудьте поменять ссылку на целевую страницу. Ссылка работает при клике в любом месте баннера, кроме иконки закрытия.

<div class="vk-banner" id="vk_banner">
	<div class="vk-banner__section">
		<a class="vk-banner__link" href="https://vk.com/timur_bv" target="_blank">
			<span class="vk-banner__icon socials__item">
				<span class="svg-icon" aria-hidden="true">
					<svg class="svg-icon__link" width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.02944 7.02944C0 14.0589 0 25.3726 0 48V52C0 74.6274 0 85.9411 7.02944 92.9706C14.0589 100 25.3726 100 48 100H52C74.6274 100 85.9411 100 92.9706 92.9706C100 85.9411 100 74.6274 100 52V48C100 25.3726 100 14.0589 92.9706 7.02944C85.9411 0 74.6274 0 52 0H48C25.3726 0 14.0589 0 7.02944 7.02944ZM16.8752 30.4169C17.4168 56.4169 30.4167 72.0418 53.2084 72.0418H54.5003V57.1668C62.8753 58.0001 69.2082 64.1252 71.7498 72.0418H83.5835C80.3335 60.2085 71.7914 53.6668 66.4581 51.1668C71.7914 48.0835 79.2915 40.5835 81.0831 30.4169H70.3328C67.9995 38.6669 61.0836 46.1668 54.5003 46.8751V30.4169H43.7499V59.2501C37.0833 57.5835 28.6668 49.5002 28.2918 30.4169H16.8752Z" fill="white"/></svg>
				</span>
			</span>
			<span class="vk-banner__text">
				<span>Призыв перейти и подписаться на аккаунт VK</span>
			</span>
		</a>
		<button class="vk-banner__close js-vk-banner-close" type="button"></button>
	</div>
</div>

CSS

Хочу отметить, что мне пришлось немного модифицировать код в части абсолютного позиционирования элементов. Баннер ставил на сайт под управлением WordPress с темой Flatsome и в этой связке иконка закрытия окна баннера «уехала» левее, поэтому в .vk-banner__close свойство right пришлось задать 0 (было 20px).

Так что если у вас баннер вдруг будет выглядеть несколько неожиданно, поправьте по месту.

.vk-banner._is-show {
	visibility: visible;
	opacity: 1;
	transform: scale(1);
}
.vk-banner {
	display: block;
	position: fixed;
	bottom: 50px;
	left: 50px;
	background-color: #0077ff;
	max-width: 360px;
	width: 100%;
	border-radius: 50px;
	z-index: 50;
	opacity: 0;
	visibility: hidden;
	transition: all 0.45s ease-in-out;
	transform: scale(0.8);
}
.vk-banner__section {
	width: 100%;
	position: relative;
}
.vk-banner__link {
	display: flex;
	align-items: center;
	padding: 20px;
}
.vk-banner__icon {
	margin-right: 20px;
	flex: 0 0 40px;
	width: 40px;
	max-width: 40px;
	height: 40px;
	pointer-events: none;
}
.socials__item .svg-icon {
	width: 40px;
	height: 40px;
}
.svg-icon__link {
	vertical-align: top;
	fill: inherit;
	width: inherit;
	height: inherit;
}
.vk-banner__text {
	font-size: 16px;
	color: #fff;
	display: block;
	line-height: 1.2;
	padding-right: 40px;
}
.vk-banner__close {
	width: 30px;
	height: 30px;
	top: 25px;
	right: 0px;
	position: absolute;
	border: none;
	background-color: transparent;
	margin-left: auto;
	cursor: pointer;
}
.vk-banner__close:before, .vk-banner__close:after {
	width: 1px;
	height: 25px;
	content: '';
	background: #fff;
	left: 15px;
	top: 3px;
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	position: absolute;
}
.vk-banner__close:after {
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
}

/*Для мобильных устройств прижимаем баннер к нижнему краю и растягиваем на всю ширину*/    
@media (max-width: 559px) {
	.vk-banner {
		max-width: 100%;
		left: 0;
		bottom: 0;
		border-radius: 0;
	}
	.vk-banner__text {
		font-size: 14px;
	}
}

JavaScript

Появление баннера обеспечивается добавлением класса _is-show. При закрытии баннера класс удаляется, баннер скрывается и остаётся скрытым до конца сессии.

<script type="text/javascript">
jQuery(function($) {
    for(var i=0; i <= 20; i++) 

var vkBanner = document.getElementById("vk_banner");
    $('.vk-banner').addClass('_is-show');

    $('.js-vk-banner-close').on('click', function() {
        $(this).closest('.vk-banner').removeClass('_is-show');
        sessionStorage.setItem('vkBannerClose', 'close');
        });

    if (sessionStorage.getItem("vkBannerClose")) {
        vkBanner.value = sessionStorage.getItem("vkBannerClose");
        $('.vk-banner').hide();
    }
});
</script>