how to remove fixed class from div when div scrolls to another div

Question

I have a div that once the top reaches the top of the browser it stayed fixed. Now I need it to remove the position fixed when the user scrolls to the top of another div, and I need the div to stay where the next div is, for when the user scrolls back up, not sure how to go about doing that. Here is what I got.

fiddle: https://jsfiddle.net/t600wkod/

Any help is appreciated!

var top = $('.part1').offset().top - parseFloat($('.part1').css('marginTop').replace(/auto/,0));


$(window).scroll(function () {
    var y = $(this).scrollTop();
    // whether that's below the form
    if (y >= top) {
      // if so, add the fixed class
      $('.part1').addClass('fixed');
    } else {
      // otherwise remove it
      $('.part1').removeClass('fixed');
    }
});