在 ionic v1 中滚动到 div 时修复它答案

【问题标题】：Make div fixed when you scroll to it in ionic v1在 ionic v1 中滚动到 div 时修复它
【发布时间】：2019-01-01 13:27:36
【问题描述】：

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

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

【问题讨论】：

您是否尝试过分配“位置：固定；”内联样式到您的 div 在 css 中。这样它总是“坚持”..
问题是当滚动到我要定位的 div 时，我需要将其设置为动态修复。在这种情况下使用内联 CSS 并不会真正起作用...
这可能会帮助你stackoverflow.com/q/51233705/3254405

标签： javascript html css angularjs ionic-v1

【解决方案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;
})

【讨论】：

你能创建一个这样的工作示例吗？也许像 JS Fiddle 一样？

【解决方案2】：

如果你没有找到任何答案，你可以使用这个离子组件

 <ion-header-bar>

  </ion-header-bar>

或

<ion-footer-bar>

  </ion-footer-bar>

【讨论】：

这是迄今为止最好和最简单的解决方案！！！！！！这应该是公认的解决方案。 Sooooo 许多其他示例指示将DIV 放在ion-content 之外-但这会产生大量工作尝试在两个不同的控制器之间传递变量等。只需将填充/边距添加到ion-content 将其推到下方固定内容，您可以开始了！