Auto Hide \BottomBar on Scroll Event
Application Type
Service Studio Version
11.11.5 (Build 44224)

Good afternoon everyone,

I have a mobile app with a project list.

My intentions are to have the visible top header content (navigation) and then a bottom tab bar content (navigation). What I'm trying to do is get the top/bottom navigation (header/footer) to hide on scroll....  I'm new to Outsystems but have always found my answers in the community before.  This is a native mobile app and found the below link which may be the answer to my question and I'm just to new to understand, or possibly not I guess sense I'm working in a mobile app vs website... lol  None-the-less, after several days I have decided to make a post for help.  Thank you everyone!  

The areas in red is what I'm essentially trying to auto-hide on scroll (animate down/animate up).

[Silk UI Web] Auto Hiding Top Navigation Bar/Header using Silk UI | OutSystems




I actually got it to work (almost).

If you look at the attached image, the bottom bar auto-hides on scroll now, the "+" floates.

But the top nav bar stays fixed with scroll untill it hits some sort of break in the "list" output as you can see in the middle of this image.  Once you scroll past that page break type space in that list, the top navigation bar auto-hides with the upward scroll.  So if going down the list, when it get's to there as that scrolls off the top of the list, the navigation bar goes with it.  So I'm just now trying to figure out what that page break type thing is in the middle of the list and then get the top navigation bar to just scroll off screen with the list as the user scrolls down. 

--- not sure if any of that makes sense.... lol....

I'm hoping it will be one of those things that fixes itself as I continue on; like that ever happens :)


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.