Make div fixed when you scroll to it in ionic v1

问题

I am trying to make a div fixed when you scroll to it but the issue is that the div I am trying to target is in ion-content and it is not allowing me to use simple jQuery or CSS solutions in order to make this feature possible. The scroll portion of ion-content is disrupting it from working according to answers I have read...

I was curious of any solutions pertaining to this issue. I am using an old version of ionic and have not come across and feasible solutions. Everything that I have tried so far has not been able to work. I appreciate any input on this issue!

回答1:

Try the below code.

template section.

<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 section

.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 section:

.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;
})