djett41 / ionic-scroll-sista

An Ionic plugin that hides the header/tabs while scrolling
MIT License
125 stars 38 forks source link

Ionic Scroll Sista

An Ionic plugin that will hide your header and tabs while scrolling a list to give users a little more room. This plugin was inspired by Ionic Header Shrink however it doesn't seem that the repo is still maintained, not to mention it doesn't support the breaking changes from Ionic beta-14.

Table of Contents

Demo

SportScoop

Ionic Scroll Sista

View the demo application code at demo/ for an example on how to use the filterBar. To run the demo clone the ionic-scroll-sista repo, then navigate to the demo/ directory and run the following

npm install
bower install
gulp

Setup

Install

bower install ionic-scroll-sista

JS Imports (index.html)

Include the following JavaScript file import in your index.html. Remember to import the ionic libraries first! The example below assumes your 3rd party bower dependencies are located in the default bower_components folder.

<script src="https://github.com/djett41/ionic-scroll-sista/raw/master/bower_components/ionic-scroll-sista/dist/ionic.scroll.sista.js"></script>

SASS FIX for Subheader placement

When all three (header/top tabs/subheader) are defined in the same view, Ionic doesn't position the subheader under the top tabs by default. If you wish to show all three in order Header/Top Tabs/Subheader, then you can import the Ionic Scroll Sista SASS or CSS as shown below

SASS @import "path_to_bower_components/ionic/scss/ionic", "path_to_bower_components/ionic-content-banner/scss/ionic.scroll.sista";

Angular Dependency (app.js)

Add jett.ionic.scroll.sista as a module dependency of your app module.

angular.module('Demo', ['ionic', 'jett.ionic.scroll.sista'])
  .config(function () {..});

Usage

Ionic Scroll Sista is an attribute level directive that you put in your ion-content to hide the header, tabs, and/or subheader while scrolling.

Ionic Scroll Sista includes the following behavior.

Possible Values

NOTES

1 When using subheaders, make sure you add ionic's has-subheader to your ion-content as described on the Ionic docs. See the demo's tab-dash.html for more info

  <div class="bar bar-subheader">
      <h2 class="title">Sub Header</h2>
  </div>

  <ion-content scroll-sista class="has-subheader" delegate-handle-"myScrollDelegate">
    //your list and content
  </ion-content>
  1. If you have more than one scrolling area, define the delegate-handle attribute on ion-content so that Scroll Sista picks uses the correct scroll delegate.

Screenshots