Question

到目前为止还很远-我正在尝试制作类似于BBC新闻应用程序但具有固定标题栏的内容。就像BBC一样，下面是视差图像，然后是内容。

问题我无法解决

1 /在iOS上流畅滚动。我用了这个：

* { -webkit-overflow-scrolling: touch; }

但是它打破了iOS上的视差。图像尺寸加倍，并且滚动时不再有视差。把它拿出来虽然可以，但是有点生涩。

2 /固定标头似乎只固定在像电话一样的狭窄屏幕宽度上，任何滚动到视线之外的宽度都可以固定。

我并不完全反对JS，只是在必要时才反对，它非常轻巧且不引人注目。

这是我的小提琴/代码：https://jsfiddle.net/tobzzzz/aq9Laaew/120148/

Answer 1

视差通常会降低性能，尤其是在移动设备上。也许您应该问自己，这是否增加了用户体验。如果没有，也许不应该在那里。

要解决固定标头问题和某些问题，只需将导航栏向上移出设置为100vh的包装器即可。 https://codepen.io/IanHazelton/full/a4ff387ebb94eb332c37dabe1de99235/ 不要忘记从语义上划分内容，并提供ARIA角色和说明。 BBC是辅助功能领导者。

<header>
    LOGO
    <div class="nav-btn"><i class="fa fa-bars"></i></div>
</header>
<div class="wrapper"></div>

固定标题，下方的视差英雄图像，iOS平滑滚动且无JS

1 个答案: