Sticky div on scroll until div reaches footer

I’m trying to make a div sticky once it reaches the top of the browser window, but go back to static positioning once the div reaches the footer.

Here is the code I’ve used for the sticky div:

 /*Add sticky div on scroll, Projects single page*/

 $(document).ready(function() {  
  var divTop = $('.entry-content').offset().top;  
  
  var stickyDiv = function(){  
    var scrollTop = $(window).scrollTop();
   

    
    if (scrollTop > divTop) {   
      $('.project-info').addClass('sticky');  
    } else {  
      $('.project-info').removeClass('sticky');   
    }  
  };  

  stickyDiv();  
  
  $(window).scroll(function() {  
    stickyDiv();  
  });  
}); 

Right now, the sticky part works fine. However, I’m not sure how modify it so that the “sticky” class is removed once the div reaches the footer.

Here’s URL to the page in question: https://propellerfund.flywheelsites.com/projects/filmfront/

To view page, use username:flywheel; password:propellerfund.

Currently, the sticky div just goes behind the footer as a temporary solution.

There may be a couple images or 15 images on a page, depending on how many images the client will upload per project.