Stretchy Headers in JavaScript

I'd like to implement a Stretchy Header Functionality as seen in this GIF:

https://s3.amazonaws.com/nrjio/Stretchy-480.gif

Currently, what I do on iPhones WebView is to call a Scope Function On Scroll (esp. focusing on Rubberband Scrolling) and Adjust the Image Height utilising CSS Calc Function, like so:

VIEW:

/* Call a Function on Scroll to Enlarge, and on Release to Reset Header.  */

<ion-content on-scroll="onScroll()" on-release="onRelease()">


//Actual Image to be Scrolled when Rubberband Scrolling up, similarly to the GIF: 

<div id="header_image" ng-style="{'background' : url('someimage.jpg') center center', 'width' : '100%', 'height' : 'calc(40% + '+dynamic_height+'px)'}"></div>

Controller:

$scope.onScroll = function() {

 //Only do funny stuff when Overscrolling on iOS

 if ($ionicScrollDelegate.getScrollPosition().top < 0)
 {
   //Adjust Height of Header by Scrolled Value
   $scope.dynamic_height = ($ionicScrollDelegate.getScrollPosition().top*-1);
   $scope.$apply();
 }
};

(Note this Setup uses Ionic Framework and Angular JS. This is however not much of relevance to a General Solution to this Issue)

I haven't yet implemented the Release Function which is supposed to be run, when the User lets go of the Scrolling, and resets the Header image to the initial height (in this case: 40%+0px).

This current Solution is not properly working as the Content resets scroll Position to 0 each time we overscroll, thus resulting in Flickering. I'd be willing to setup a Codepen, but maybe someone can come up with a ready solution already?