页脚的逻辑与页眉的逻辑相似。
您需要找到到滚动容器底部的距离。
我们知道：

• 一旦此值为0，不透明度应为1
• 如果该值大于页脚的高度，则不透明度应为零
• 不透明度应该插入到

所以我们可以得出一个简单的公式：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>

您可以尝试这种方法以实现更平滑的过渡。

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);

字符串
查看https://codepen.io/ankitkumar507/pen/oNmWVbp链接以查看一个工作示例。