I'm facing an issue with my code that involves fading the opacity of a div named .overlay when the user is 100vh from the bottom of the screen. The problem arises when the screen width changes and causes elements to grow taller, resulting in the opacity function generating a negative number.
The logic within the if statement seems correct; it's the opacity function that's causing trouble. Any suggestions on how to fix this?
$(window).scroll(function() {
// Begin adjusting footer opacity at 100vh
if ($(window).scrollTop() + $(window).height() >= $(document).height() - $(window).height()) {
var scrollTop = $(this).scrollTop();
$('.overlay').css({
opacity: function() {
var elementHeight = $(this).height();
return 1 + (elementHeight - scrollTop) / elementHeight;
}
});
} else {
$('.overlay').css({
opacity: function() {
return 1;
}
});
}
});header {
background: blue;
}
main {
background: white;
}
footer {
background: blue;
position: relative;
}
header,
main,
footer {
min-height: 100vh;
}
.overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
background-color: #000;
}
.add-height{
min-height: 1200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header></header>
<main>
<div class="add-height">Hello</div>
</main>
<footer id="footer">
<div class="overlay"></div>
</footer>