为什么滚动时这个固定的标题会移动？答案

【问题标题】：Why is this fixed header shifting when scrolling?为什么滚动时这个固定的标题会移动？
【发布时间】：2018-06-27 15:11:23
【问题描述】：

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

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

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

谁能帮助找出问题所在？

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

【问题讨论】：

标签： css fixed

【解决方案1】：

高度问题是由低于特定点触发的 CSS 类引起的。

这是由添加到<header> 的额外minimal 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 样式。 :)。

【讨论】：