粘性标题没有完全固定答案

【问题标题】：Sticky Header not staying totally fixed粘性标题没有完全固定
【发布时间】：2014-06-05 17:52:42
【问题描述】：

我正在使用sticky.js 来完成一个粘性标题。一切正常，除了当我向下滚动时，标题向上移动约 10-20 像素，向左移动约 10-20 像素。我不确定我做错了什么，但如果有人知道为什么会这样，我将非常感谢您的帮助。

这是一个正在开发的网站的链接http://barret.co/dad/services.html。

任何帮助或建议表示赞赏。

【问题讨论】：

请问您为什么要使用 Javascript 来修复侧边栏？为什么不直接设置为position:fixed？
您需要确保 javascript 应用的样式与没有 javascript 的样式一致。所以没有任何捕捉。
位置固定不能正常工作，因为我使用的是网格系统。它也是响应式的，因此使用插件更容易。
Sticky.js 所做的只是在您开始滚动时添加position:fixed，它会出现。但是，在添加它时，position:sticky 下的文本与没有它的位置不同。因此突然转变。
我刚刚意识到它一定是以某种方式覆盖了我的网格系统。当我从徽标顶部删除边距时，它在顶部有一个由网格系统创建的默认 20px。滚动时，此填充以某种方式被删除。现在想弄清楚为什么。

【解决方案1】：

为了对抗垂直移动，你必须指示sticky.js（如果可能的话，不知道）将.sticker 的顶部设置为10 像素（

然后：徽标图像的 css 应更改为：

#logo {
    margin-left: 5%;
    margin-bottom: 25%;
    margin-top: 20px;
}

我删除了

display: block;
max-width: 100%; 
margin: auto;

如您所见。您必须根据自己的喜好调整左边距值。

然后：由于 .sticker 元素的宽度以百分比表示，因此元素的实际宽度会在它变为“固定”时发生变化。这是因为该元素现在被视为视口的子元素，而不是 html 父元素。这会将您的内容从 310 像素压缩到大约 273 像素。在 .sticker 元素上设置适合您设计的宽度（以百分比为单位）并完成。

希望对您有所帮助！

【讨论】：