Just a fiddle

by Md. Atiquzzaman Soikat

HTML

<header></header>
<section>
  <div class='wrapper'>
    Content
  </div>
</section>
<footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <div class="hulp-nodig-float">
    Footer jQuery
  </div>
</footer>

CSS

section {
  height:1900px;
  }
.hulp-nodig-float{
  position:fixed;
  bottom:50%;
  bottom:-300px;
  width:100%;
  height:120px;
  font-size:30px;
  color:white;
  background:#fff;
  z-index:10;
  border-top:1px solid #E1E1E1;
  }
footer{
  height:250px;
  background:#F60;
  }
.fixed_button{
    position:absolute !important;
    margin-top:1900px;
    bottom: 270px !important;
    background:#FFF;
}

JavaScript

jQuery(window).scroll(function() {
	var delayms = "900"; // mseconds to stay color
		if (jQuery(this).scrollTop() > 200) {
		    jQuery('.hulp-nodig-float').animate({ bottom: '0px' });
		} else $(".closebutton-footer").click(function (e) {
		    jQuery('.hulp-nodig-float').stop().animate({ bottom: '-300px' });
		    	jQuery('.hulp-nodig-float').css('display','none').delay('delayms');
		})
	});
  $(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 250) {
        jQuery('.hulp-nodig-float').stop().animate({ bottom: '0px' });
       $('.hulp-nodig-float').addClass('fixed_button');
   }else{
       $('.hulp-nodig-float').removeClass('fixed_button');
   }
});