Show Sticky Footer when User Scroll Down using CSS and JavaScript

In this post, we are going to design a sticky footer section which can be used as an Advertisement Slot. The sticky footer will be visible only when user scrolls down. Once closed it wont be displayed until next reload.

CSS :

<style>
  .sticky-footer{
    height:90px;
    background-color:#000000;
    position:fixed;
    width:100%;
    z-index:999;
    text-align:center;
    bottom:0;
    display:none;
  }
  .sticky-close{
    position: absolute;
    right: 10px;
    top:4px;
    color:#ffffff;
    cursor: pointer;
  }
</style>

HTML :

<div class="sticky-footer">
  <img src="ads.jpg">
  <span class="sticky-close">X</span>
</div>

JavaScript :

<script>
  var sticky_closed = false;
  $(window).scroll(function(){
    if(!sticky_closed){
      var docScroll = $(document).scrollTop();
      if(docScroll <=90){
        $(".sticky-footer").slideUp();
      }else{
        $(".sticky-footer").slideDown();
      }
    }
  });

  $(".sticky-close").on('click',function(){
    footer = $(this).parent('.sticky-footer');
    footer.slideToggle();
    sticky_closed = true;
  });
</script>

Follow this video for complete guidance :