Question

这个问题让我头痛不已，拖延了我的项目，因为我无法弄明白。

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

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

我需要完成此任务，最好不要使用JS，但这似乎不可能。

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

Answer 1

使用位置：导航的粘性可能接近你所追求的。 ios7中的Safari至少支持它（demo）。尝试将这样的内容添加到导航栏中：

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

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

移动标题下面的持久导航（如iOS7浏览器）

1 个答案: