移动标题下方的持久导航（如 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。