0

当您滚动到它时，我试图修复一个 div，但问题是我试图定位的 div 位于 ion-content 中，它不允许我使用简单的 jQuery 或 CSS 解决方案来实现此功能. 根据我读过的答案，离子内容的滚动部分正在破坏它的工作......

我很好奇与此问题有关的任何解决方案。我正在使用旧版本的 ionic 并没有遇到可行的解决方案。到目前为止，我尝试过的一切都无法正常工作。我感谢任何关于这个问题的意见！

4

2 回答 2

1

如果您没有找到任何答案，您可以使用此离子组件

 <ion-header-bar>

  </ion-header-bar>

或者

<ion-footer-bar>

  </ion-footer-bar>
于 2018-08-10T11:48:56.323 回答
1

试试下面的代码。

模板部分。

<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;
})
于 2018-07-25T10:29:28.157 回答