为什么滚动时此固定标题会移动？

Question

我有一个简单的固定标头，当正文稍微滚动时，它似乎在上移，但仅在主页上（并且仅在移动显示上）。其他页面也可以，所以我认为它与一个实例上显示/不显示元素有关，而另一实例上没有。

我无法找出修复该主页的方法，以使其保持不变。

http://dev.bellavou.co.uk（最好检查并使用响应式设计模式在移动设备上查看）。

http://dev.bellavou.co.uk/request-a-consultation/这表明在精细滚动时标题保持固定。

任何人都可以帮助确定问题所在吗？

body.fixed-header #header {
    position:fixed;
    z-index: 100;
    width: 100%;
    top:0;
}

Answer 1

高度问题是由在特定点以下触发的CSS类引起的。

这是由添加到minimal的附加<header> CSS类引起的，并且会影响DOM结构下面的许多元素。

例如，您可以看到#branding受添加的minimal CSS类的影响。

顺便说一句，您可以看到标题实际上并不是100％宽。

这是因为它是CSS：

body.fixed-header.home #header {
    width: calc(100% - 15px);
}

从上方更改为下方即可解决此问题。

body.fixed-header.home #header {
    width: 100%;
}

您的样式被覆盖：

使用width: 100%：

在这种情况下，切记要检查开发工具并跟踪实际的，最终的，计算出的CSS样式。 ：）。