Fade in fixed footer relative to scroll

Question

How do I fade in footer on scroll?

I've found a few different ways to do this but interested if anyone knows a way I can do it thats more responsive to the scroll position.

I'm trying to create a parallax effect and fade the fixed footer in behind the content container on scroll.

I've added the desired effect with the header jsfiddle

Javascript for header

$(document).ready(function(){
   $(window).scroll(function(){
      $(".intro").css("opacity", 1 - $(window).scrollTop() / $('.intro').height());
   });
});

Answer 1

The logic for the footer is similar to that of the header.

You need to find the distance to the bottom of the scrolling container.

We know:

• Once this value is 0, the opacity should be 1
• if this value is larger than the height of the footer, then the opacity should be zero
• the opacity should be interpolated in between

So we can come up with the simple formula: opacity = 1 - scrollBottom / height of footer

$(document).ready(function(){
  $(window).scroll(function(){
    $(".intro").css(
      "opacity", 
      1 - $(window).scrollTop() / $('.intro').height()
     );    

    const scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
    const opacity = 1 - scrollBottom/$(".outro").height();
    $(".outro").css("opacity", opacity);
  });
});

header {
  background: pink;
  height: 100px;
  width: 100%;
  padding: 20px;
  position: fixed;
  top: 0;
  z-index: 2;
}
.container {
  background: white;
  padding: 30px;
  padding-top: 140px;
  position: relative;
  z-index: 1;
  margin-bottom: 100px;
}
footer {
  width: 100%;
  height: 100px;
  background: blue;
  position: fixed;
  bottom: 0;
  z-index: 0;
  color: white;
  transition: opacity 75ms linear;
}
body {
  margin: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<header class="intro">
  <h1>Header, Lorem ipsum dolor sit amet,</h1>
</header>
<div class="container">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus diam et pulvinar pretium. Quisque luctus nunc nunc, ut scelerisque odio pulvinar quis. Ut orci magna, ultrices vitae tempor eu, fringilla rutrum dolor. Vivamus sed felis vitae quam egestas venenatis. Fusce commodo ipsum maximus blandit dapibus. Donec sagittis purus sed scelerisque ornare. Sed libero est, iaculis eu pretium sed, commodo eget velit. Morbi eleifend tortor sed mattis accumsan. Vestibulum sit amet dignissim lacus. Curabitur eget elit vel sem posuere venenatis. Phasellus bibendum justo ultricies sollicitudin vestibulum. Cras at sem nec erat finibus feugiat at sed massa. Donec at lectus nunc. Praesent condimentum aliquet neque, ac blandit tortor pulvinar sed.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus diam et pulvinar pretium. Quisque luctus nunc nunc, ut scelerisque odio pulvinar quis. Ut orci magna, ultrices vitae tempor eu, fringilla rutrum dolor. Vivamus sed felis vitae quam egestas venenatis. Fusce commodo ipsum maximus blandit dapibus. Donec sagittis purus sed scelerisque ornare. Sed libero est, iaculis eu pretium sed, commodo eget velit. Morbi eleifend tortor sed mattis accumsan. Vestibulum sit amet dignissim lacus. Curabitur eget elit vel sem posuere venenatis. Phasellus bibendum justo ultricies sollicitudin vestibulum. Cras at sem nec erat finibus feugiat at sed massa. Donec at lectus nunc. Praesent condimentum aliquet neque, ac blandit tortor pulvinar sed.</p>
</div>

<footer class="outro">
  <h1>Footer</h1>
</footer>

Answer 2

You can try this approach for more smooth transition.

window.addEventListener("scroll", function () {
    const scrollPosition = window.scrollY; // Scroll position
    const windowHeight = window.innerHeight; // height of window
    const bodyHeight = document.body.clientHeight;  // body content height
   });
   const remainingDistance = bodyHeight - (scrollPosition + windowHeight); //Calculating the remaining distance
const opacity = Math.max(0, 1 - remainingDistance * opacityDecreaseFactor);
footer.style.opacity = opacity.toFixed(2);

Check out this link https://codepen.io/ankitkumar507/pen/oNmWVbp to check a working example.