fadeIn fadeOut JQuery add and remove class issue?

I'm attempting to make a form sticky sidebar on my Squarespace website. This is the JQuery I'm using to achieve the sticky sidebar. I'm trying to create a fade in effect when the form attaches to the scrolling and fade out effect right before the form touches the footer (and vice versa for scrolling up).

Here is my JQuery script:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
jQuery("document").ready(function($){
var nav = $('form');
var footerTop = $('footer').offset().top;
var navHeight = $('#form').outerHeight();
var stopPoint = footerTop - navHeight - 70;
 $(window).scroll(function () {
   if ($(this).scrollTop() >= 450) {
      nav.addClass("form-fixed");
   } else {
      nav.removeClass("form-fixed");
  }
   if ($(this).scrollTop() >= 2740) {
      nav.addClass("form-stop");
   } else {
      nav.removeClass("form-stop");
   }
  });
 });
</script>

Here is my CSS:

/*Home V2*/
.form
  {posiiton: relative;}


.form-fixed 
  {position: fixed; 
   background-color: #F5FFFB; 
   top: 80px;
   right: 7%;
   z-index: 9999;
   width: 20%;}

.form-stop
  {position: absolute;
   bottom: 0;
   top: auto;
   left: 0;}

I've been trying to attach .fadeIn() or .fadeOut() at the ends of the add/remove class commands. It works, but it's either only complicit during one command or fading in and out repeatedly. Any help?