页面加载时的粘性标题崩溃答案

【问题标题】：Sticky header crash on page load页面加载时的粘性标题崩溃
【发布时间】：2015-04-19 16:01:31
【问题描述】：

我有一个奇怪的错误，很难重现，但真的很烦人。我有一个粘性导航栏标题，它跟随页面滚动以保持在顶部。一般来说它工作正常，但是......如果我在页面底部，然后刷新页面并在刷新时按下底部箭头，标题“认为”页面顶部是顶部当我在底部时可见空间。结果，导航栏停留在页面中间。

代码如下：

<header class="sticky" id="top-header">....</header>

#top-header {
    background: linear-gradient(to right, #be2e26 30%, #be2e26 20%, rgba(22, 22, 22, 0) 50%, rgba(22, 22, 22, 0) 50%) repeat scroll 0 0%, linear-gradient(to left, #be2e26 30%, #be2e26 20%, rgba(22, 22, 22, 0) 50%, rgba(22, 22, 22, 0) 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 50px;
    left: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: 99999;
}

#top-header.sticky {
    bottom: auto;
    position: fixed;
    top: 0;
}

【问题讨论】：

在 Chrome 和 Mozilla 中测试。两者的最新版本。
您是否尝试删除transition，只是为了看看是否相同？我在一个页面中有三个固定栏，没有麻烦。
刚刚进行了更多测试，并表明当它发生时，超过了标头堆栈的限制，class='sticky' 被删除。当我滚动到限制以下时，粘性类重新出现。我会在没有过渡的情况下对其进行测试，但我认为这不会产生影响

标签： html css

【解决方案1】：

抱歉，我没有代表发表评论。

最近报告了一个引导设置的类似问题（请参阅：Bootstrap page opening vertically halfway down）。 OP 描述为打开一半，但是当我查看它时，行为与您的描述相似。 OP 自己发布了一个答案，说这是由“jumbotron”类在页面上使用两次引起的。

这适用于您吗？

如果不是，那听起来像是js的问题。

【讨论】：

我什至没有在页面中使用这个类。不过谢谢。