Show Sticky Footer when User Scroll Down using CSS and JavaScript

0
3040

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 :

ALSO READ  Design a Attractive Custom 404 Page

Comments are closed.