{"id":19719345,"url":"https://github.com/webjoaoneto/ionic2-fixedscroll-directive","last_synced_at":"2025-07-10T13:33:31.222Z","repository":{"id":57276087,"uuid":"101525682","full_name":"webjoaoneto/ionic2-fixedscroll-directive","owner":"webjoaoneto","description":"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)","archived":false,"fork":false,"pushed_at":"2017-08-29T00:53:17.000Z","size":5751,"stargazers_count":14,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-03T03:03:22.134Z","etag":null,"topics":["angular4","ionic3","typescript"],"latest_commit_sha":null,"homepage":"https://joao-gsneto.github.io/ionic2-fixedscroll-directive/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webjoaoneto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-27T02:44:47.000Z","updated_at":"2025-06-24T11:34:04.000Z","dependencies_parsed_at":"2022-08-24T23:53:50.889Z","dependency_job_id":null,"html_url":"https://github.com/webjoaoneto/ionic2-fixedscroll-directive","commit_stats":null,"previous_names":["joao-gsneto/ionic2-fixedscroll-directive"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/webjoaoneto/ionic2-fixedscroll-directive","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webjoaoneto%2Fionic2-fixedscroll-directive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webjoaoneto%2Fionic2-fixedscroll-directive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webjoaoneto%2Fionic2-fixedscroll-directive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webjoaoneto%2Fionic2-fixedscroll-directive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webjoaoneto","download_url":"https://codeload.github.com/webjoaoneto/ionic2-fixedscroll-directive/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webjoaoneto%2Fionic2-fixedscroll-directive/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264585372,"owners_count":23632646,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular4","ionic3","typescript"],"created_at":"2024-11-11T23:07:49.574Z","updated_at":"2025-07-10T13:33:31.187Z","avatar_url":"https://github.com/webjoaoneto.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ionic2-FixedScroll-Directive\n![|Dependency check](https://david-dm.org/joao-gsneto/ionic2-fixedscroll-directive.svg) \n![|DevDependency check](https://david-dm.org/joao-gsneto/ionic2-fixedscroll-directive/dev-status.svg)\n[![npm version](https://badge.fury.io/js/ionic2-fixedscroll-directive.svg)](https://badge.fury.io/js/ionic2-fixedscroll-directive) \n\nIonic2+ Fixed Scroll Directive for any component in mobile platforms (IOS, Android, Windows Phone). Not works with PWA yet.\n\n![|Demo Gif Screen](https://joao-gsneto.github.io/ionic2-fixedscroll-directive/fixedscroll.gif) \n\n# Dependency\nNeeds Ionic 3 on the most recent versions.      \n\n# Usage\n\nInstall: `npm install ionic2-fixedscroll-directive --save`\n\nImport the ionic2-fixedscroll-directive module:\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { IonicApp, IonicModule } from 'ionic-angular';\nimport { MyApp } from './app/app.component';\nimport { NgFixedScrollModule  } from 'ionic2-fixedscroll-directive';\n\n@NgModule({\n    declarations: [\n        MyApp\n    ],\n    imports: [\n        NgFixedScrollModule,\n        IonicModule.forRoot(MyApp)\n    ],\n    bootstrap: [IonicApp],\n    entryComponents: [\n        MyApp\n    ]\n})\nexport class AppModule {}\n```\n\nIf you are using PageModule, you need to import the NgFixedScrollModule in your page module\n\n```javascript\nimport { NgFixedScrollModule  } from 'ionic2-fixedscroll-directive';\n\n@NgModule({\n  declarations: [\n    MyPage\n  ],\n  imports: [\n    IonicPageModule.forChild(MyPage),\n    NgFixedScrollModule\n  ],\n  entryComponents: [\n    MyPage\n  ]\n})\nexport class MyPageModule {}\n```\n\nAdd the directive in any custom component\n\n```html\n      \u003cYourComponent fixed-scroll\u003e\u003c/YourComponent\u003e\n```\nor with ionic native components\n\n```html\n      \u003cion-searchbar fixed-scroll\u003e\u003c/ion-searchbar\u003e\n```\n\n\n# CSS and styles (Important)\n\nThis component adds a \"fixed\" class to the component in the moment that scrolls on page are on the component.\nBUT you need to setup your SASS file to add the fixed styles to your app.\n\nMost common style is defining a top: 0; and position: fixed; css attributes.\n\nExample (Using a searchbar component):\n\n* In custom components, is a good practice create an separeted css class for ios|md|wp because the toolbar sizes are different\n\n```sass\n   your-page {\n       ion-searchbar {\n           \u0026.fixed {\n            @extend .toolbar; //optional\n            position: fixed;\n            top: 0; \n\n            transition: all 0.5s ease;\n\n            \u0026.searchbar-ios {\n                transform: translateY(calc(#{$navbar-ios-height} + #{$cordova-ios-statusbar-padding}));\n            }\n\n            \u0026.searchbar-md {\n                transform: translateY(#{$navbar-md-height});\n            }\n            \n            \u0026.searchbar-wp {\n                transform: translateY(#{$navbar-md-height});\n            }\n            z-index: 3; //zindex to put it on top of some ionic components\n        }\n       }\n   }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebjoaoneto%2Fionic2-fixedscroll-directive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebjoaoneto%2Fionic2-fixedscroll-directive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebjoaoneto%2Fionic2-fixedscroll-directive/lists"}