Really simple fixed footer reveal with a tiny bit of jQuery

index.html

<main></main>
<footer>
  <div class="footer__inner">
    <div class="logo">Logo</div>
    <nav>
      <a href="">© Company name</a>
      <div class="social">
        <a href="">F</a>
        <a href="">T</a>
        <a href="">In</a>
        <a href="">@</a>
      </div>
    </nav>
  </div>
</footer>

really-simple-fixed-footer-reveal-with-a-tiny-bit-of-jquery.markdown

Really simple fixed footer reveal with a tiny bit of jQuery

A Pen by Mitchel van Eijgen on CodePen.

License.

script.js

var logoElement = $('footer .logo');

$(window).scroll(function() {
  
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
     
       $(logoElement).addClass('show');
     
   } else if($(logoElement).hasClass('show') && $(window).scrollTop() + $(window).height() > $(document).height() - 150) {
     
      $(logoElement).removeClass('show');
     
   }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

$brand-primary: #92B8C3;
$brand-secondary: #FF30AA;
$brand-dark: #fff;
$brand-light: #fff;
$brand-grey: #344;
* {
  box-sizing: border-box;
}
main {
  height: 100vh;
}
footer {
  height: 300px;
  background-color: $brand-primary;
  position: relative;
  .footer__inner {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 40px 60px;
    width: 100%;
    * {
      color: $brand-light;
    }
  }
  .logo {
    text-align: center;
    text-transform: uppercase;
    font-size: 40px;
    margin-bottom: 80px;
    transform: translateY(50px);
    opacity: 0;
    transition: transform, opacity;
    transition-duration: .8s;
    transition-timing-function: ease;  
    
    &.show{
      transform: translateY(0);
      opacity: 1;
    }
  }
  nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}