Например мы хотим отобразить иконку формы обратной связе после того как человек долистал до футера сайта.
Содержание
Делается так
CSS
.chat-btn.fixed {
width: 50px;
height: 50px;
border-radius: 50%;
background: #31aff5 url(/img/chat-icon.svg) center center no-repeat; /* ссылка на картинку иконку */
position: fixed;
bottom: 120px;
right: 30px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
transition: all 0.2s ease-in-out;
z-index: 2;
}
.chat-btn:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.chat-btn.fixed {
display: block;
}
JS
Работает так: когда человек доскролит до DIV – site-footer к DIV который внутри DIV с классом chat-btn добавится класс fixed
/* ==========================================================================
Chat button
========================================================================== */
$('.site-footer').waypoint(function() {
$('.chat-btn').addClass('fixed');
}, {
offset: '80%'
});
HTML
<footer class="site-footer section-spacing">
<a href="" class="chat-btn fixed" data-toggle="modal" data-target="#modal-contact-form"></a> </footer>
