Question

我想实现一个Stretchy Header功能，如本GIF所示：

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

目前，我在 iPhone WebView 上做的是调用Scroll上的Scope Function（特别是关注Rubberband Scrolling）并使用CSS Calc函数调整图像高度，如下所示：

查看：

/* 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>

控制器：

$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();
 }
};

（请注意，此安装程序使用Ionic Framework和Angular JS。但这与此问题的一般解决方案无关）

当用户放开滚动时，我还没有实现应该运行的释放功能，并将标题图像重置为初始高度（在这种情况下：40％+ 0px）

此当前解决方案无法正常工作，因为每当我们过度滚动时，内容会将滚动位置重置为0，从而导致闪烁。我愿意设置Codepen，但也许有人可以提出一个现成的解决方案吗？

Answer 1

是的，有人已经提出了可能的solution header.style[ionic.CSS.TRANSFORM] = 'translate3d(0,'+translateAmt+'px,0) scale('+scaleAmt+','+scaleAmt+')';

JavaScript中的拉伸标题

1 个答案: