保持頭固定在角/離子應用滾動

Question

目前，在有限的房地產用戶決定在我的應用程序向下滾動，它們可獲贈以下幾點：

如果真的，我想的頭是固定的What are you looking for?和Current location項目：

這是我到目前爲止的代碼：

<ion-view view-title="Nearby"> 
    <ion-content> 
    <!-- Search --> 
    <div class="list"> 
     <div class="item item-input-inset" style="border: 0px; padding-bottom: 0px; background-color: #2784c9;"> 
     <label class="item-input-wrapper"> 
      <input type="search" placeholder="What are you looking for?" style="width: 100%" ng-model="services" ng-click="showLocations=false; showServices=false"> 
     </label>  
     <div class="item item-input-inset" style="border-top: 0px; background-color: #2784c9; margin-left: -2px;"> 
     <label class="item-input-wrapper"> 
      <input type="search" placeholder="Current location" style="width: 100%" ng-model="location" ng-click="showLocations=true; showServices=true"> 
     </label> 
     <button class="button button-positive button-small" ng-click="location=''; services=''"> 
      <i class="ion-close"></i> 
     </button> 
     </div> 
    </div> 

     <!-- List of services --> 
    <div class="list" style="margin-top:-24px"> 
     <ion-list> 
     <ion-item ng-repeat="service in serviceList | filter:services" href="#/app/services/{{service.id}}" class="item-icon-right" ng-hide="showServices"> 
      {{service.title}} 
      <i class="icon ion-chevron-right icon-accessory"> 
         <span class="badge badge-positive">{{service.total}}</span> 
        </i> 
     </ion-item> 
     </ion-list> 
    </div> 

    <!-- List of regions --> 
    <div class="list" style="margin-top:-24px"> 
     <ion-list> 
     <ion-item ng-repeat="location in locationList | filter:location track by $index" href="#/app/locations/{{location.id}}" ng-click="setLocation(location)" class="item-icon-right" ng-show="showLocations"> 
      {{location.title}} 
      <i class="icon ion-chevron-right icon-accessory"> 
         <span class="badge badge-positive">{{location.count}}</span> 
        </i> 
     </ion-item> 
     </ion-list> 
    </div> 

    </ion-content> 
</ion-view> 

我也在這裏創建了一個CodePen：http://codepen.io/anon/pen/VeQzBv。

Answer 1

您可以使用子報爲我的代碼，這樣它的工作：

<ion-header-bar class="bar-light bar-subheader"> 
     <input type="text" placeholder="Search Force" data-ng-model="searchForce"> 
     <button ng-if="searchForce.length" 
       class="button button-icon ion-android-close input-button" 
       ng-click="clearSearch()"> 
     </button> 
</ion-header-bar> 

Codepen demo

也看到這個帖子了一些替代方案：http://forum.ionicframework.com/t/how-to-make-search-bar-sticky/20721