Need to Change Text when it reached to its position - floating button

Question

i have a floating button which scrolls to div ,but when it reaches the element of div i need to to change the text and display someother can it be possible to do it , heres the code below and it was just a floating window and i made it to scroll as button clicks, so is it possible to add the change of text when it reaches the div element and show someother ,i will be appreicated for the help , thank you

<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>