Ionic 3 demo of how to hide the header when scrolling down and show it again when scrolling up.
- Ionic info
- Running the demo
- Using the component in your projects
- Settings
- Changelog
- Contribution
- Support this project
Ionic:
ionic (Ionic CLI) : 4.0.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.11
Cordova:
cordova (Cordova CLI) : 7.1.0
Cordova Platforms : android 6.3.0, ios 4.5.4
System:
Android SDK Tools : 26.1.1
ios-deploy : 1.9.2
ios-sim : 5.1.0
NodeJS : v8.11.1 (/usr/local/bin/node)
npm : 5.10.0
OS : macOS High Sierra
Xcode : Xcode 9.4.1 Build version 9F2000
Inside of the project folder, run npm install and then to run the demo in the browser ionic serve [-t android/ios]
Just copy the full-screen-content folder (inculding the html, ts and scss files) in your project, and include the FullscreenContentComponent in the declarations array from your @NgModule.
Then in your view, just include the header and the content inside the <fullscreen-content></fullscreen-content> tags and add the #target template variable to the header
<fullscreen-content>
<ion-header #target>
...
</ion-header>
<ion-content>
...
</ion-content>
</fullscreen-content>
Important
When using the component on iOS, please make sure to:
- Install the Web View plugin for Cordova that is specialized for Ionic apps.
- Configure the
StatusBarcordova plugin setting theoverlaysWebViewto befalse, and thebackgroundColorByHexStringto be the same color of your header. For example if your header's color is#387ef5(Ionic's default primary color):
// Ionic Native
import { StatusBar } from '@ionic-native/status-bar';
// Pages
import { HomePage } from '../pages/home/home';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
// ...
constructor(platform: Platform, statusBar: StatusBar) {
platform.ready().then(() => {
statusBar.styleLightContent();
if (platform.is('ios')) {
statusBar.overlaysWebView(false); // <--- Here!
statusBar.backgroundColorByHexString('#387ef5'); // <--- And here!
}
// ...
});
}
}
The component also defines the FullScreenContentSettings interface, to customize the behaviour of the component.
export interface FullScreenContentSettings {
tolerance?: number;
offset?: number;
headerVisibleClassName?: string;
headerHiddenClassName?: string;
}
The settings should be sent to the component using the settings property:
// Fullscreen content settings
import { FullScreenContentSettings } from '../path/to/component/models/full-screen-content-settings';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public customSettings: FullScreenContentSettings = {
tolerance: 10,
offset: 250
};
// ...
}
And in the view:
<fullscreen-content [settings]="customSettings">
...
</fullscreen-content>
You can change the default tolerance () and offset () and the class names used when showing (headerVisibleClassName) and hidding (headerHiddenClassName) the header.
| Param | Type | Description | Default value |
|---|---|---|---|
tolerance |
number |
Optional. Scroll tolerance in px before state changes |
10 |
offset |
number |
Optional. Vertical offset in px before element is first unpinned |
250 |
headerVisibleClassName |
string |
Optional. Name of the class used to show the header | header--visible |
headerHiddenClassName |
string |
Optional. Name of the class used to hide the header | header--hidden |
- 04/08/2018 Updated dependencies to use the latest Ionic 3 version. Improved internal logic to avoid accessing the DOM directly
- Having an issue or looking for support? Open an issue and I'll do my best to help you out.
- Got a new feature or a bug fix? Fork the repo, make your changes, and submit a pull request.
If you find this project useful, please star the repo to let people know that it's reliable. Also, share it with friends and colleagues that might find this useful as well. Thank you! :)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent