Looking to add a Stretchy Header Functionality similar to the one shown in this GIF:
Currently, on iPhones WebView, my approach involves calling a Scope Function On Scroll (especially focusing on Rubberband Scrolling) and adjusting the Image Height with CSS Calc Function like this:
VIEW:
/* Trigger a function on scroll and release to reset header. */
<ion-content on-scroll="onScroll()" on-release="onRelease()">
//Image that gets scrolled when rubberband scrolling, resembling 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() {
//Perform actions only during overscrolling on iOS
if ($ionicScrollDelegate.getScrollPosition().top < 0)
{
//Adjust height of header based on scroll value
$scope.dynamic_height = ($ionicScrollDelegate.getScrollPosition().top*-1);
$scope.$apply();
}
};
(Please note that this setup uses Ionic Framework and Angular JS, but it's not essential for a generic solution to this problem)
I have yet to implement the Release Function to run when the user stops scrolling, resetting the header image to its initial height (in this case: 40%+0px).
This current solution is flawed as the content resets the scroll position to 0 each time we overscroll, causing flickering. I'm open to setting up a Codepen, but perhaps someone already has a ready solution?