I am struggling to figure out how to keep an image fixed at the top of the footer div while scrolling to the bottom of a webpage.
My approach involved calculating the height of the footer in order to adjust the scrolling behavior by subtracting it from the window's height.
The image with the class .footer-arrow is the one I want to be fixed.
The following code accomplishes this task to some extent:
$(function() {
$(window).scroll(function() {
var footHeight = $('#footer').offset().top;
var height = (($(window).height()) - footHeight);
if ($(this).scrollTop() > footHeight) {
$('.footer-arrow').css({
position: 'fixed',
bottom: 20
});
} else {
$('.footer-arrow').addClass('fixed');
$('.footer-arrow').css({
position: 'fixed',
bottom: 140,
});
}
})
});