JavaScript 中的可伸缩标题

Posted 2023-03-14

【中文标题】JavaScript 中的可伸缩标题

【英文标题】：Stretchy Headers in JavaScript

【发布时间】：2015-06-11 20:07:52

【问题描述】：

我想实现这个 GIF 中看到的 Stretchy Header 功能：

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

目前，我在 iPhones WebView 上所做的是在滚动上调用 Scope 函数（尤其是关注橡皮筋滚动）并使用 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，但也许有人已经想出了一个现成的解决方案？

【参考方案1】：

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