I am working on making the footer have a class of position-sticky which changes to fixed-bottom when it reaches the end of the page.
So far, this is what I have implemented:
$(window).on("scroll touchmove", function() {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
$('#bottom-fix').addClass('position-sticky').removeClass('fixed-bottom');
}
else {
$('#bottom-fix').removeClass('position-sticky').addClass('fixed-bottom');
}
});<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="py-md-3 py-2">
<div class="container">
<div class="row">
<div class="col-md-12 text-justify">
*[... Large block of text about Kitty Bingo ...]*
</div>
</div>
</div>
</div>
<nav class="navbar fixed-bottom" id="bottom-fix" style="background-color: #08A8E4;">
<div class="container d-flex justify-content-center">
<a href="#" target="_blank" class="btn btn-kitty d-inline-block">JOIN NOW</a>
</div>
</nav>However, there is a flickering issue when it reaches the bottom. Any suggestions or solutions would be greatly appreciated.