iOS scrollable UINavigationBar follows UIScrollView

December 22, 2013

Inspired by the navigation bar functionality seen in Chrome, Facebook and Instagram iOS apps which it can shrink or expand based on the scrolling of a UIScrollView object such as UITableView, I have coded a custom navigation bar, called GTScrollNavigationBar at


GTScrollNavigationBar Screenshot 1 GTScrollNavigationBar Screenshot 2

The GTScrollNavigationBar class inherits UINavigationBar and has a scrollView property which the GTScrollNavigationBar object will follow the scrolling. When setting the scrollView property, GTScrollNavigationBar will add a UIPanGestureRecognizer to the scrollView and have a function called handlePan: to handle the gesture.

In setScrollView: function:

if (self.panGesture.view) {
  [self.panGesture.view removeGestureRecognizer:self.panGesture];
[scrollView addGestureRecognizer:self.panGesture];

Then in the handlePan: function, the GTScrollNavigationBar is scrolled up or down by adjusting its frame.origin.y based on the change in contentOffset property of the scrollview. The reason why I choose this instead of the translation of the panGesture is that we want the scrolling of the navigation bar is aligned with UIScrollView’s one. Besides it can check whether contentOffset.y < 0 so that the the navigation bar won’t be scrolled.

The title, back button and other views in navigation bar is also faded in/out when the navigation bar is scrolled. It is done by adjusting their alpha property based on the position of the navigation bar.

That’s it :) You can read the README file at to set up the GTScrollNavigationBar in your project or view the example in the project.

Discussion, links, and tweets