如何在滚动时隐藏导航栏,除非在屏幕顶部

Posted

技术标签:

【中文标题】如何在滚动时隐藏导航栏,除非在屏幕顶部【英文标题】:How to hide navigation bar on scroll except when at the top of the screen 【发布时间】:2018-11-07 18:11:32 【问题描述】:

我有一个UIViewController,其中包含一个固定到视图所有边缘的UICollectionView。此视图控制器位于 UINavigationController 内。

我想在收藏视图中向下滚动时逐渐隐藏导航栏。在我滚动导航栏高度的距离时,导航栏应该完全隐藏。如果我向上滚动,它应该会逐渐显示导航栏。

github 上的所有开源导航栏我都试过了,但没有一个能在 ios 12 上正常工作。

我怎样才能做到这一点?

【问题讨论】:

没有开箱即用的东西。可能需要构建一个自定义导航栏并使用 UIScrollView 的 viewDidScroll 代表来计算隐藏和显示。 Hide NavigationBar when scrolling tableView in CollectionView?的可能重复 @Harsh 这是我不确定的“计算隐藏和显示”。链接问题中的所有答案都不起作用。我想知道最佳答案中AMScrollingNavbar 的动画是如何工作的,但该框架在 iOS 11+ 上无法正常工作。 Fork 让它适用于 iOS 11。:) 【参考方案1】:

UICollectionViewUIScrollView 的子类,因此您可以访问其scrollViewDidScroll 委托方法。您的UIViewController 也归其导航控制器所有,因此您可以在视图控制器中创建一个实例属性,如navigationDelegate: UINavigationController?,它将充当代理。在导航控制器中,将该属性设置为等于self,然后通过滚动委托随意操作导航栏。对于这种标准和基本的东西,绝对不需要第三方脚本。

【讨论】:

理论上,是的。但是当你尝试它时,你会发现一些麻烦。它可以解决,但不像猜测那么容易。 如果他想发布代码并具体化,我们可以这样做。

以上是关于如何在滚动时隐藏导航栏,除非在屏幕顶部的主要内容,如果未能解决你的问题,请参考以下文章

html Philip Benton编写的CodePen。向上滚动导航栏显示 - 导航栏固定在浏览器顶部,隐藏在滚动下方

如何在页面顶部保留导航栏?

用户滚动时隐藏导航栏

Bootstrap 3 固定顶部导航栏显示水平滚动

如何限制从顶部定位我的标签,但在隐藏导航栏时不让它移动(因为它会调整视图高度)?

BootstrapVue:创建 2 个底部导航栏粘在顶部的导航栏?