Живая демонстрация данного виджета на этой странице. Если вы с ПК то справа внизу вы увидете 3 кнопки: телефон, whatsapp, telegram. Если вы с мобильного устройства (или можете сузить окно браузера для просмотра эффекта), то виджеты расположатся в нижней части экрана, по центру и будут скрываться при пролистывании.
Пример
- Пример
- HTML
- CSS
- JS
Для наглядности эффекта, данный пример расположен вне рамок с кодом, обратите внимание на нижний правый угол.
<div id="call-widget">
<div class="wrap">
<a href="tel:+77777777777" title="Позвонить">
<img src="/images/blog-images/phone.svg" alt="Телефон" title="Телефон">
</a>
<a href="https://tg.me/mytg" target="_blank" title="Написать в Telegram">
<img src="/images/blog-images/telegram.svg" alt="Telegram" title="Telegram">
</a>
<a href="https://api.whatsapp.com/send?phone=77777777777" target="_blank" title="Написать в Whatsapp">
<img src="/images/blog-images/whatsapp.svg" alt="WhatsApp" title="WhatsApp">
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
#call-widget {
position: fixed;
bottom: 30px;
right: 30px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#call-widget .wrap {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#call-widget .wrap a {
margin-bottom: 30px;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#call-widget .wrap a:hover {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
#call-widget .wrap a img {
height: 50px;
}
@media (max-width: 992px) {
#call-widget {
bottom: 0;
left: 0;
right: 0;
}
#call-widget .wrap {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
#call-widget .wrap a {
margin-right: 15px;
}
}function phone_panel(w) {
var w = $(window).width();
var phonePanel = $('#call-widget');
if (w < 992) {
phonePanel.css('bottom', '-100px');
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function () {
phonePanel.css('bottom', '0');
}, 250));
} else {
phonePanel.removeAttr('style');
}
}
function phonePanel_mobileStart() {
var w = $(window).width();
var phonePanel = $('#call-widget');
if (w < 992) {
phonePanel.css('bottom', '-100px');
} else {
phonePanel.removeAttr('style');
}
}
$(window).resize(function () {
phonePanel_mobileStart();
});
$(window).scroll(function () {
phone_panel();
});