我试图在滚动到 div 时修复它，但问题是我尝试定位的 div 位于 ion-content 中，并且它不允许我使用简单的 jQuery 或 CSS 解决方案来实现此功能。根据我读过的答案，离子内容的滚动部分正在扰乱它的工作......
我很好奇与这个问题有关的任何解决方案。我正在使用旧版本的离子，还没有遇到可行的解决方案。到目前为止我所尝试的一切都无法奏效。感谢您对这个问题的任何意见！
尝试下面的代码。
模板部分。
<body ng-controller="MyCtrl">
<ion-nav-bar class="bar-stable"></ion-nav-bar>
<div id="subHeader" class="bar bar-subheader" ng-class="{'hide' : data.hideSubHeader}"></div>
<ion-content on-scroll="onScroll()"><!-- id="scrollWatch"-->
<div id="wallBanner" class="wallBanner">
<div id="mainBarContainer" class="mainBar">
<div id="mainBar">
<button class="button left">11</button>
<button class="button">22</button>
<button class="button right">33</button>
</div>
</div>
</div>
<div><div ng-repeat="item in items">item</div></div>
</ion-content>
CSS 部分
.wallBanner {
height: 300px;
width: 100%;
position: relative;
background-color: blue;
}
.mainBar {
border-bottom: 1px solid #cccccc;
text-align: center;
position: fixed;
top: 252px;
height: 48px;
background-color: white;
width: 100%;}
.fixMainBar { position: fixed; top: 50px;}
.left {float: left;}
.right { float: right;}
.hide { display: none;}
控制器部分：
.controller('MyCtrl', function($scope, $ionicScrollDelegate) {
$scope.data = {};
$scope.data.hideSubHeader = true;
var subHeaderEl = angular.element( document.querySelector( '#subHeader' ) );
var mainBarContainerEl = angular.element( document.querySelector( '#mainBarContainer' ) );
var mainBarEl = angular.element( document.querySelector( '#mainBar' ) );
$scope.onScroll = function() {
if($ionicScrollDelegate.getScrollPosition().top >= 222 && $scope.data.hideSubHeader) {
$scope.data.hideSubHeader = false;
subHeaderEl.append(mainBarEl);
$scope.$apply();
}
else if($ionicScrollDelegate.getScrollPosition().top < 222 && !$scope.data.hideSubHeader) {
$scope.data.hideSubHeader = true;
mainBarContainerEl.append(mainBarEl);
$scope.$apply();
}
};
$scope.items = {};
for(var i = 0; i < 200; i++)
$scope.items[i] = i;
})
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
