Make Javascript to Invisible after reaching the div

Question

there i have a floating element that functions as on click scroll to the div , but the element is still appearing even after its reached the targeted div ,so i want to make it to invisible and not to appear when it reached to the div the floating thing must go invisible and reappear when the user is out of the page view of the div ,so if anyone can help me the code i will appreciate the work thank you here is the code

   <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
$('#downloadq').hide().delay(5000).fadeIn(2200);
});
</script>
<style> 
.wrapperq{
 animation: shake 2.82s cubic-bezier(.36, .07, .19, .97) both infinite;
 transform: translate3d(0, 0, 0);
 backface-visibility: hidden;
 perspective: 1000px;
 }
 @keyframes shake {
 10%,
 90% {
 transform: translate3d(-1px, 0, 0);
 }
 20%,
 80% {
 transform: translate3d(2px, 0, 0);
 }
 30%,
 50%,
 70% {
 transform: translate3d(-4px, 0, 0);
 }
 40%,
 60% {
 transform: translate3d(4px, 0, 0);
 }
 }
     }</style>

  <style>
  .wrapperq {
  text-align: center;
   }
  .buttonq {
  position: auto;
  top: 50%;
   }

.buttonq {
background-color: #000000; /* Green */
border: black;
z-index: 99999;
color: white;
padding: 15px 32px;
border-radius: 15px 50px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}

.buttonq1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>

<script>
window.smoothScroll = function(target) {
var scrollContainer = target;
do { //find scroll container
    scrollContainer = scrollContainer.parentNode;
    if (!scrollContainer) return;
    scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);

var targetY = 0;
do { //find the top of target relatively to the container
    if (target == scrollContainer) break;
    targetY += target.offsetTop;
} while (target = target.offsetParent);

scroll = function(c, a, b, i) {
    i++; if (i > 30) return;
    c.scrollTop = a + (b - a) / 30 * i;
    setTimeout(function(){ scroll(c, a, b, i); }, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
 }
</script>

 <script>
       $(window).scroll(function() {
var winScrollTop = $(window).scrollTop();
var winHeight = $(window).height();
var floaterHeight = $('#floater').outerHeight(true)
var fromBottom = 50;
var top = winScrollTop +  floaterHeight - fromBottom;
$('#floater').css({'top': top + 'px'});
  });</script>
     <style>
       #floater {
position: absolute;
top: 100px;
left: -200px;
width: 100px;
height: 100px;
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
z-index: 99999;
border-radius: 3px 0 0 3px;
color: white;
text-align: center;
box-sizing: border-box;
  }

.red {
background-color: green;
color: white;
 }
     </style>