Hide show top view when scroll in swift

Question

I have a custom view as my collection view header. But of course when I scroll, the header disappears until I scroll back to the top.

An example of what I want to achieve is like the current Facebook app. Where the "LIVE, Photo, Check in" view hides when you scroll down, and returns once you scroll upwards a bit.

It's like this. But I just want the live, photo and check in bar hidden and show while scroll.

My current approach is just add as a collection view header.

It has been answered here http://stackoverflow.com/questions/28631985/how-to-hide-navigation-bar-and-tab-bar-while-scrolling-table-view-in-ios — Windindi, Nov 04 '16 at 06:09
Add a gesture recognizer to handle scrolling events on collection view. Detect direction of gesture to hide/unhide the header view. — Windindi, Nov 04 '16 at 06:27
I can imagine the direction. But how to do the hide/unhide as a collection view header — Happiehappie, Nov 04 '16 at 06:32
I would suggest remove the header view out of the collection view and create it as separate view on top of the collection view. Now while scrolling change alpha/ translate the independent header view accordingly. — Windindi, Nov 04 '16 at 12:22
I am doing something very similar, I have a small view acting as a header and then I have a larger view called contentView in which I put a uicollectionview. I want the header to dissapear and appear when ever I scroll down but I am not sure how to implement this behaviour. — Munib, Jul 22 '17 at 02:14

score 11 · Answer 1 · answered Mar 20 '17 at 13:02

Here is code for hiding navigation bar with scroll

    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
            //
            contentOffSet = self.channelsCollView.contentOffset.y;
        }

        func scrollViewDidScroll(_ scrollView: UIScrollView) {
            //

            let scrollPos = self.channelsCollView.contentOffset.y ;

            if(scrollPos >= contentOffSet ){
                //Fully hide your toolbar
                UIApplication.shared.isStatusBarHidden = true
                UIView.animate(withDuration: 0.5, animations: {
                    //
                    //write a code to hide
self.navigationController?.isNavigationBarHidden = true
                }, completion: nil)
            } else {
                //Slide it up incrementally, etc.
                UIApplication.shared.isStatusBarHidden = false
                UIView.animate(withDuration: 0.5, animations: {
                    //
self.navigationController?.isNavigationBarHidden = false
                }, completion: nil)
            }
        }

score 1 · Answer 2 · answered Nov 04 '16 at 11:36

You can use these libraries, which manages hiding and showing of Navigation bar as user scrolls :

Another way is to use this function in your viewWillAppear

if let navigationController = self.navigationController as? ScrollingNavigationController {
    navigationController.followScrollView(tableView, delay: 30.0)
}

score 0 · Answer 3 · edited Apr 10 '19 at 19:45

0

Try this it is working in my project:

self.navigationController.hidesBarsOnSwipe = true;

edited Apr 10 '19 at 19:45

Community

1
1

answered Nov 04 '16 at 05:05

KKRocks

8,222
1
18
84

does that mean my custom view must be in my navigation bar? Sorry but I'm confused with this approach. – Happiehappie Nov 04 '16 at 05:06
did you try this ? – KKRocks Nov 04 '16 at 05:07
Yes but for some reason my navigation bar wasn't hiding, it worked for the first vc on the stack but the subsequent vc's navbar won't hide. Also, even in the first vc, my header is still there. – Happiehappie Nov 04 '16 at 05:23
It's a show segue. One view controller down the stack from the root – Happiehappie Nov 04 '16 at 05:29

Hide show top view when scroll in swift

3 Answers3