Make content sticky on scroll to a point in jQuery

Add following condition to your if statement:

$(".blue").height() + $(".blue").offset().top > windowTop

Your code should look like this:

$(document).ready(function() {
  var stickyTop = $('.sticky').offset().top;

  $(window).scroll(function() {
    var windowTop = $(window).scrollTop();
    if (stickyTop < windowTop && $(".blue").height() + $(".blue").offset().top - $(".sticky").height() > windowTop) {
      $('.sticky').css('position', 'fixed');
    } else {
      $('.sticky').css('position', 'relative');
    }
  });
});

See updated JSFiddle.