https://github.com/webjoaoneto/ionic2-fixedscroll-directive
An Ionic2+ directive to create cool and fast fixed components on the top of the screen after scrolldown the page. Demo site (Only works with mobile inspector)
https://github.com/webjoaoneto/ionic2-fixedscroll-directive
angular4 ionic3 typescript
Last synced: 7 months ago
JSON representation
An Ionic2+ directive to create cool and fast fixed components on the top of the screen after scrolldown the page. Demo site (Only works with mobile inspector)
- Host: GitHub
- URL: https://github.com/webjoaoneto/ionic2-fixedscroll-directive
- Owner: webjoaoneto
- License: other
- Created: 2017-08-27T02:44:47.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-29T00:53:17.000Z (over 8 years ago)
- Last Synced: 2025-07-03T03:03:22.134Z (7 months ago)
- Topics: angular4, ionic3, typescript
- Language: TypeScript
- Homepage: https://joao-gsneto.github.io/ionic2-fixedscroll-directive/
- Size: 5.48 MB
- Stars: 14
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ionic2-FixedScroll-Directive
[](https://badge.fury.io/js/ionic2-fixedscroll-directive)
Ionic2+ Fixed Scroll Directive for any component in mobile platforms (IOS, Android, Windows Phone). Not works with PWA yet.
# Dependency
Needs Ionic 3 on the most recent versions.
# Usage
Install: `npm install ionic2-fixedscroll-directive --save`
Import the ionic2-fixedscroll-directive module:
```javascript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app/app.component';
import { NgFixedScrollModule } from 'ionic2-fixedscroll-directive';
@NgModule({
declarations: [
MyApp
],
imports: [
NgFixedScrollModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
]
})
export class AppModule {}
```
If you are using PageModule, you need to import the NgFixedScrollModule in your page module
```javascript
import { NgFixedScrollModule } from 'ionic2-fixedscroll-directive';
@NgModule({
declarations: [
MyPage
],
imports: [
IonicPageModule.forChild(MyPage),
NgFixedScrollModule
],
entryComponents: [
MyPage
]
})
export class MyPageModule {}
```
Add the directive in any custom component
```html
```
or with ionic native components
```html
```
# CSS and styles (Important)
This component adds a "fixed" class to the component in the moment that scrolls on page are on the component.
BUT you need to setup your SASS file to add the fixed styles to your app.
Most common style is defining a top: 0; and position: fixed; css attributes.
Example (Using a searchbar component):
* In custom components, is a good practice create an separeted css class for ios|md|wp because the toolbar sizes are different
```sass
your-page {
ion-searchbar {
&.fixed {
@extend .toolbar; //optional
position: fixed;
top: 0;
transition: all 0.5s ease;
&.searchbar-ios {
transform: translateY(calc(#{$navbar-ios-height} + #{$cordova-ios-statusbar-padding}));
}
&.searchbar-md {
transform: translateY(#{$navbar-md-height});
}
&.searchbar-wp {
transform: translateY(#{$navbar-md-height});
}
z-index: 3; //zindex to put it on top of some ionic components
}
}
}
```