Keep header fixed on scroll in Angular/Ionic application

Question

At the moment, when a user with limited real estate decides to scroll down in my application, they are greeted with the following:

When really, I would like the the header items of What are you looking for? and Current location to be fixed:

This is my code so far:

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

I've also created a CodePen here: http://codepen.io/anon/pen/VeQzBv.

Amitesh Kumar · Accepted Answer · 2016-01-23 12:16:37Z

1

You can use a sub-header for this it work for my code:

 <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

Also see this post for some alternatives: http://forum.ionicframework.com/t/how-to-make-search-bar-sticky/20721

answered Jan 23, 2016 at 12:16

Amitesh Kumar

3,0891 gold badge28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

methuselah Over a year ago

I've tried this. It doesn't really work. Do you have any other suggestions?

Collectives™ on Stack Overflow

Keep header fixed on scroll in Angular/Ionic application

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related