相对于滚动淡入固定页脚

Question

我找到了几种不同的方法来做到这一点，但如果有人知道我可以做到这一点的方法，我很感兴趣，这对滚动位置更加敏感。

我正在尝试创建视差效果并在滚动时淡入内容容器后面的固定页脚。

我已经在标题中添加了所需的效果 jsfiddle

标题的Javascript

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

Answer 1

页脚的逻辑与页眉的逻辑类似。

您需要找到到滚动容器底部的距离。

我们知道：

• 一旦该值为 0，不透明度应为 1
• 如果该值大于页脚的高度，则不透明度应为零
• 应在两者之间插入不透明度

所以我们可以得出一个简单的公式：

opacity = 1 - scrollBottom / height of footer

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

    var 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>