当到达并行容器的底部时，滚动侧导航栏将保持静态

Question

我有一个固定的导航栏，一旦标题与滚动位置匹配，它就会滚动。

我希望此侧面导航在到达与侧面导航平行的div的底部时停止滚动并保持静态。

到目前为止，我已经有了代码，一旦用户滚动经过标题，我就可以进行滚动，但是我无法弄清楚如何捕捉到需要停止滚动的点。

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

    var scrollPosition = $(window).scrollTop();
    var header = $('.header').outerHeight();

    if(scrollPosition >= header) {
        $('.nav').addClass('nav-fixed');
      $('.content').addClass('content-fixed');
    } else {
        $('.nav').removeClass('nav-fixed');
      $('.content').removeClass('content-fixed');
    }
  });
});

这是我的完整代码：https://jsfiddle.net/xpvt214o/574606/