2

这个问题让我非常头疼，并推迟了我的项目，因为我无法弄清楚。

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

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

我需要做到这一点，最好没有 JS，但这似乎是不可能的。

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

4

1 回答 1

1

使用 position: sticky 导航可能接近你所追求的。至少 ios7 中的 Safari 支持它（演示）。尝试将这样的内容添加到您的导航中：

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

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

于 2013-11-27T11:13:48.797 回答