I'm attempting to keep my footer fixed at the bottom of the page and have it fade in when scrolling to the very end. However, currently, it remains at the top of the page.
Despite trying the code below, I can't seem to get it to display with a "slowReveal" effect...
I've placed my footer at the bottom of my pages, adjusted the footer as per your instructions, and included my CSS file.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/tarraps_stylesheet.css">
<link rel="stylesheet" href="js/bootstrap.js">
<link rel="stylesheet" href="js/jquery-3.4.0.min.js">
<!-- Bootstrap for Glyphicons -->
<!-- jquery js -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.js"></script>
<script>
$(document).ready(function() {
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
function checkScrolling() {
if (isScrolledIntoView($('.myFooterClass')) == true) {
if ($('.myFooterClass').hasClass('slowReveal')) { /**/ } else {
$('.myFooterClass').addClass('slowReveal');
}
} else {
if ($('.myFooterClass').hasClass('slowReveal')) {
$('.myFooterClass').removeClass('slowReveal');
}
}
}
window.onscroll = function() {
checkScrolling();
}
window.onresize = function() {
checkScrolling();
}
})
</script>
<body>
<div class="row">
<div class="col-md-12 mb-4">
<footer class="page-footer grey text-center text-md-left mt-0">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h5 class="title mb-3">Footer</h5>
<p>This page was created as part of the programming workshop.</p>
</div>
<div class="col-md-6">
<h5 class="title mb-3">Links</h5>
<ul>
<li><a href="https://www.h-da.de/">Go to Hochschule Darmstadt website</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container-fluid">
© 2019 Copyright: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d101c090915141c">[email protected]</a>"> Matthias Weihrauch </a>
</div>
</div>
</footer>
</div>
</div>
</body>
</head>
https://i.sstatic.net/FnKdn.png
Currently, the footer is only at the bottom of the content and not sticking to the bottom of the page...