animated navigation arrow

fixed_downArrow.html

<style>

.arrowDown {
  position: absolute;
  top: 0;
  right: -100px;
  z-index: 3;
  text-align: center;
  width: 100px;
}

.arrowDown a {
  display: block;
}

.arrowDown h4 {
  color: #444;
  transition: color .3s ease;
}

.arrowDown:hover h4 {
  color: #c5d8d2;
}
  
.arrowDown .downArrow {
  margin-top: 0px;
  animation-name:arrowDown;
  animation-iteration-count:infinite;
  animation-duration:1s;
  animation-fill-mode:forwards;
  animation-timing-function:ease-in-out;
  transition: transform .5s ease;
}

.arrowDown.atBottom .downArrow {
  transform:rotate(180deg);
}

@keyframes arrowDown {
  0% { margin-top:0 }
  50% { margin-top:10px }
  100% { margin-top:0 }
}

@media (max-width:1300px) {
  .arrowDown {
    display:none;  
  }
}

</style>
<div id="scroller1" class='arrowDown'>
  <a href='#book-now'>
    <h4>Book Now</h4>
    <img src="http://res.cloudinary.com/dm8clqmym/image/upload/v1522893619/thin-arrowheads-pointing-down_1_sveknj.png" class="downArrow"/>
  </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){

  var el = $('#scroller1');
  var title = $('#scroller1 h4');

  if (el) {
    $(window).scroll(function() {

        var TOP_OFFSET = 0;
        var BOTTOM_OFFSET = 0;

        var scroll = $(window).scrollTop();
        var top = $('.content-inner').offset().top + TOP_OFFSET;
        var bottom = $('#scrollStop1').offset().top + BOTTOM_OFFSET;

        // Calculate 'top' style property.

        var fromTop = scroll - top;
        var height = bottom - top;
        var position = Math.min(Math.max(fromTop, 0), height);

        el.css('top', position + 'px');

        // if you've scrolled further than the top of div1 plus it's height.
        // change the color. either by adding a class or setting a css property.

        var hasClass = el.hasClass('atBottom');

        if (!hasClass && position === height) {

          el.addClass('atBottom');
          title.text('Menu');
          
        } else if (hasClass && (height - position > 300)) {

          el.removeClass('atBottom');
          title.text('Book Now');
           
        }
    });
  }
});

</script>