David
This is awesome, THX for the effort! For the future it'd be really nice to have some snapping effect so that if the header is not fully hidden, it will either snap back to be fully visible or completely hidden.
Ionic Scroll Sista
An Ionic plugin that pushes your header/tabs out of the scroll view
Free!
Devin Jett
Member since 2014
Details
Ionic Scroll Sista
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.
Ionic Scroll Sista is an attribute level directive that you put in your ion-content. Ionic Scroll Sista comes with many configurations that allow you to slide your header/tabs/and or subheader out of the view while scrolling, giving your users the best experience.
Download my app SportScoop for iOS and Android to see Ionic Scroll Sista in action!!
iOS App Store
Android Google Play
SportScoop web preview
Also Watch the Demo video below!!
For more information or to report an issue visit Ionic Scroll Sista on github
Hey there! You'll need to log in before you can leave a comment here.
Simon Taylor
Thanks for your great work Devin. Although there is a small problem in my use case where the originally set top value does not return when scrolling to the top. Please see here for an example. https://youtu.be/nGdLLObbq9U
Simon Taylor
In my use case I corrected this by manually changing lines 108 - 112 to be: if (subHeader) { subHeaderHeight = subHeader.offsetHeight; // contentTop += subHeaderHeight; contentTop = 108; } It might be possible to calculate the distance that <ion-content> is away from the top of the screen and then use that rather than the sub-header height?
mBiz
Thanks for your great plugin. I have a problem, not working on nested state navigation. Example: #/tab/chat:/id
Web Prog
I could not get it to work with an actual programming environment because of many dependency problems. There is no working example or productive tutorial neither on github which leads to a success. All shown examples or demos are on youtube videos !!!???
Devin Jett
Hey guys thanks for the feedback. I'll try to get to some of the requests in the near future, just released my app SportScoop for Android and ios which also uses scroll-sista in action!! (www.sportscoopapp.com for download links) Web Prog download my app to see it work. I also included the Ionic View ID for the actual Demo. Also checkout the code and look at the demo code I have to see how it works in development. If you think theres an issue with the library after trying to get it to work, then file an issue on github Thanks!!!
Devin Jett
Hey guys thanks for the feedback. I'll try to get to some of the requests in the near future, just released my app SportScoop for Android and ios which also uses scroll-sista in action!! (www.sportscoopapp.com for download links) Web Prog download my app to see it work. I also included the Ionic View ID for the actual Demo. Also checkout the code and look at the demo code I have to see how it works in development. If you think theres an issue with the library after trying to get it to work, then file an issue on github Thanks!!!
Web Prog
I could not get it to work with an actual programming environment because of many dependency problems. There is no working example or productive tutorial neither on github which leads to a success. All shown examples or demos are on youtube videos !!!???
mBiz
Thanks for your great plugin. I have a problem, not working on nested state navigation. Example: #/tab/chat:/id
Simon Taylor
In my use case I corrected this by manually changing lines 108 - 112 to be: if (subHeader) { subHeaderHeight = subHeader.offsetHeight; // contentTop += subHeaderHeight; contentTop = 108; } It might be possible to calculate the distance that <ion-content> is away from the top of the screen and then use that rather than the sub-header height?
Simon Taylor
Thanks for your great work Devin. Although there is a small problem in my use case where the originally set top value does not return when scrolling to the top. Please see here for an example. https://youtu.be/nGdLLObbq9U
David
This is awesome, THX for the effort! For the future it'd be really nice to have some snapping effect so that if the header is not fully hidden, it will either snap back to be fully visible or completely hidden.
Hey there! You'll need to log in before you can leave a rating here.
David
Awesome!
teddy
awesome feature! thanks!
suminJeong
i love it!!!!
Web Prog
not working with actual environment, no live demo available (just youtube videos).
{{ rating.comment }}
{{ rating.comment }}
Web Prog
not working with actual environment, no live demo available (just youtube videos).
suminJeong
i love it!!!!
teddy
awesome feature! thanks!
David
Awesome!