I have a page which has a back arrow ("<") with transparent background at the top. I want to gradually set the background non-transparent when the content is scrolled up.
However, the following code not work. There are several issues when I test in Ripple using visual studio.
- The
offsetHeightofheaderalready returns 0. - The opacity doesn't change gradually (I changed the line
var headerHeight = header.offsetHeight;tovar headerHeight = 44;). It change from totally transparent to solid background suddenly at some point when scrolling up.
Did I miss anything?
<html ng-app="ionic.example">
<head>
<meta charset="utf-8">
<title>Header</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive bar-hidden backarrow-bar" style="opacity:0">
<!-- only change the background color of this bar -->
<ion-nav-back-button class="button-clear">
<i class="ion-chevron-left" style="color:#ffffff;text-shadow: 2px 4px 3px rgba(0,0,0,0.3);"></i>--test--
</ion-nav-back-button>
</ion-nav-bar>
<ion-content header-shrink scroll-event-interval="5" overflow-scroll="true" padding="false" class="no-header" style="top: 0; background-color:white;">
test<br />test<br/>test<br />test<br/>
test<br />test<br/>test<br />test<br/>
test<br />test<br/>test<br />test<br/>
test<br />test<br/>test<br />test<br/>
test<br />test<br/>test<br />test<br/>
</ion-content>
</body>
</html>
JS:
angular.module('ionic.example', ['ionic'])
.directive('headerShrink', function ($document) {
var fadeAmt;
var shrink = function (header, content, amt, max) {
amt = Math.min(44, amt);
fadeAmt = 1 - amt / 44;
ionic.requestAnimationFrame(function () {
header.style.opacity = 1 - fadeAmt;
});
};
return {
restrict: 'A',
link: function ($scope, $element, $attr) {
var starty = $scope.$eval($attr.headerShrink) || 0;
var shrinkAmt;
var header = $document[0].body.querySelector('.backarrow-bar');
var headerHeight = 44; //header.offsetHeight;
$element.bind('scroll', function (e) {
var scrollTop = null;
if (e.detail) {
scrollTop = e.detail.scrollTop;
} else if (e.target) {
scrollTop = e.target.scrollTop;
}
if (scrollTop > starty) {
// Start shrinking
shrinkAmt = headerHeight - Math.max(0, (starty + headerHeight) - scrollTop);
shrink(header, $element[0], shrinkAmt, headerHeight);
} else {
shrink(header, $element[0], 0, headerHeight);
}
});
}
}
})
Aucun commentaire:
Enregistrer un commentaire