javascript - 移动设备标题下方的持久导航(如 iOS7 浏览器)

Question

这个问题让我非常头疼，并且因为我无法解决而耽误了我的元素。

我正在尝试创建一个适合移动设备的网站并在 iOS7/OSX 中执行测试。

基本上我有一个标题，它下面有一个导航，然后是所有内容。当用户向下滚动时，我希望标题顺利消失，然后导航栏将剪辑(修复)到浏览器的顶部。到目前为止，这似乎仅使用 CSS3 就可以实现，但它并不完美，一旦滚动停止，javascript 就会使导航栏“捕捉”到浏览器。此外，我想让它在我向上滚动时显示标题，无论我是在页面的中间、顶部还是底部。这就像 iOS Safari 浏览器中的页眉和页脚一样工作。当您向下滚动时，所有内容都会滑走，但当您向上滚动时，页脚和页眉会自行显示。

我需要完成这个，最好不用 JS，但这似乎不可能。

那么，有人可以向我展示或将我链接到可以向我展示这是如何完成的以及我究竟需要什么的教程吗？我将不胜感激。请记住，它必须在移动浏览器上顺畅运行。

Answer 1

使用 position: sticky 导航可能接近你所追求的。至少 ios7 中的 Safari 支持它 ( demo )。尝试在您的导航中添加类似这样的内容:

.nav {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 15px;
}

对于更复杂的行为，例如向上滚动时标题再次出现，您可能需要求助于 javascript。