javascriptjquerycssparallaxfadein

Fade in fixed footer relative to scroll

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());
   });
});
Solution

  • 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:

    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>