How to make Search Bar sticky?

Hi everyone,

What should I do in order to make my search/filter bar stick or stayput while the user scrolls an ion-list? Here’s a precise CodePen for what I’m doing

I’ve check out this plunkr which I found as an answer to one of the questions in this forum but it didn’t work for me. I even updated the Ionic libraries to the latest rc2 but didn’t get the suggested results when I tried on my code.

Is this the kind of sticky search bar you are looking for? Or are you looking for sticky as in the list of iOS contacts like this one?

1 Like

You can use a sub-header:

1 Like

Or if you want a search bar to overlay your header bar as a service from your js, you can use my filterBar search directive :smile: here

1 Like

Thanks @joseadrian, @brandyshea and @djett for really useful answers! Each of your information actually helped me! I have a sticky filter/search bar now.

I love the Ionic Community!


per @brandyshea I have changed your template to this and it sticks to the top.

<script id="templates/musicList.html" type="text/ng-template">
 <ion-header-bar class="bar-light bar-subheader">
        <filter-box placeholder="Enter Zipcode" filtertext="search"></filter-box>  </ion-header-bar>
  <ion-view view-title="Albums">

<ion-list >
  <ion-item ng-repeat="item in items | filter: {Zipcode: search.value}">

Hope this helps.