Ionic 顶部贴附效果的实现

当我们在实际应用开发中会遇到这样的一个问题：在我们进行页面滚动的时候需要将页面顶部或者页面中部的筛选栏不会随着内容的滚动而消失，而是当筛选栏的位置到达顶部的时候就固定在顶部，这样即使页面内容滚动到了底部，我们依旧可以点击处于页面顶部或中部的筛选栏进行筛选。为了解决这样的问题，我们可以采用ion-affix和ion-sticky的方法对它进行贴附。 
方法一：ion-affix（只适用于ios设备，在安卓上无法使用） 
首先我们需要在index.html中引入

<script src="http://www.aliok.com.tr/post-assets/code/ion-affix-1.0.1/ion-affix.js"></script>

然后在angular.module(‘demo’, [‘ionic’, ‘ion-affix’]);中注入ion-affix 
按照以下方式进行操作

<ion-content scroll-event-interval="5">
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面上部内容</p>
  <p>页面上部内容</p>
  <p>页面上部内容</p>
  <p>页面上部内容</p>
  <p>页面上部内容</p>
  <p>页面上部内容</p>
  <p>页面上部内容</p>
  <p>页面上部内容</p>
  <p>页面上部内容</p>
  <p>页面上部内容</p>
  <div class="afix">
    <div  ion-affix data-affix-within-parent-with-class="afix">
     <div class="row stable-bg">
       <div class="col col-25 text-center">种类</div>
       <div class="col col-25 text-center">价格</div>
       <div class="col col-25 text-center">销量</div>
       <div class="col col-25 text-center">评价</div>
     </div>
    </div>
    <p>页面下部内容</p>
    <p>页面下部内容</p>
    <p>页面下部内容</p>
    <p>页面下部内容</p>
    <p>页面下部内容</p>
    <p>页面下部内容</p>
    <p>页面下部内容</p>
    <p>页面下部内容</p>
    <p>页面下部内容</p>
    <p>页面下部内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    <p>页面内容</p>
    </div>
</ion-content>

注意在ion-content 需要加入scroll-event-interval这是滚动的间隔时间，然后将筛选栏以下的内容写在一个div中并且给这个div一个类名，然后设定一个需要贴附的筛选栏的div， 
并给这个div加上ion-affix data-affix-within-parent-with-class这里的类名要与上层div类名一致。这样当页面滚动到筛选栏的位置的时候，该筛选栏就会固定在顶部而不会因为滚动而消失。 
方法二：ion-sticky 
首先使用boewr安装ion-sticky 
bower install ion-sticky –save 
然后在index.html中引入下载下来的ion-sticky.js，并在module中注入‘ion-sticky’

  <script src="lib/ion-sticky/ion-sticky.js"></script>

然后按照以下方式操作：

<ion-content ion-sticky>
    <ion-list>
        <ion-item class="item-divider"> A </ion-item>
        <ion-item> A1 </ion-item>
        <ion-item> A2 </ion-item>
        <ion-item> A3 </ion-item>
        <ion-item> A4 </ion-item>
        <ion-item> A5 </ion-item>
        <ion-item> A6 </ion-item>
        <ion-item> A7 </ion-item>
        <ion-item> A8 </ion-item>

        <ion-item class="item-divider"> B </ion-item>
        <ion-item> B1 </ion-item>
        <ion-item> B2 </ion-item>
        <ion-item> B3 </ion-item>
        <ion-item> B4 </ion-item>
        <ion-item> B5 </ion-item>
        <ion-item> B6 </ion-item>
        <ion-item> B7 </ion-item>
        <ion-item> B8 </ion-item>

        <ion-item class="item-divider"> C </ion-item>
        <ion-item> C1 </ion-item>
        <ion-item> C2 </ion-item>
        <ion-item> C3 </ion-item>
        <ion-item> C4 </ion-item>
        <ion-item> C5 </ion-item>
        <ion-item> C6 </ion-item>
        <ion-item> C7 </ion-item>
        <ion-item> C8 </ion-item>

        <ion-item class="item-divider"> D </ion-item>
        <ion-item> D1 </ion-item>
        <ion-item> D2 </ion-item>
        <ion-item> D3 </ion-item>
        <ion-item> D4 </ion-item>
        <ion-item> D5 </ion-item>
        <ion-item> D6 </ion-item>
        <ion-item> D7 </ion-item>
        <ion-item> D8 </ion-item>

        <ion-item class="item-divider"> E </ion-item>
        <ion-item> E1 </ion-item>
        <ion-item> E2 </ion-item>
        <ion-item> E3 </ion-item>
        <ion-item> E4 </ion-item>
        <ion-item> E5 </ion-item>
        <ion-item> E6 </ion-item>
        <ion-item> E7 </ion-item>
        <ion-item> E8 </ion-item>

        <ion-item class="item-divider"> F </ion-item>
        <ion-item> F1 </ion-item>
        <ion-item> F2 </ion-item>
        <ion-item> F3 </ion-item>
        <ion-item> F4 </ion-item>
        <ion-item> F5 </ion-item>
        <ion-item> F6 </ion-item>
        <ion-item> F7 </ion-item>
        <ion-item> F8 </ion-item>
    </ion-list>
</ion-content>

这样的方式是根据item-divider这个类来找到需要贴附的地区的，如果有需要可以更改ion-sticky.js中的代码。 
效果图如下：