Trigger event with jQuery
04 December 2018
Web
Development
JavaScript
jQuery:
$(window).scroll(function() {
var heightTop = $('#fab').offset().top,
outHeight = $('#fab').outerHeight(),
wHeight = $(window).height(),
wScroll = $(this).scrollTop();
if (wScroll > (heightTop+outHeight-wHeight) && (heightTop > wScroll) && (wScroll+wHeight > heightTop+outHeight)){
$('.telegram_button').fadeOut("slow");
} else {
$('.telegram_button').fadeIn("slow");
}
});
HTML:
<!-- Floating Action Button - FAB - Telegram -->
<div id="fab">
<img class="telegram_button" src="{{ URL::to('img/telegram_logo.svg') }}" data-toggle="popover" data-placement="left" title="Need help?" data-content="<a href='https://t.me/envienta' title='telegram link'><button class='btn btn-primary btn-sm'>Join </button></a> our Telegram channel!" width="64" height="64" alt="Telegram">
</div>