html - 页面加载时粘性标题崩溃

Question

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

代码如下:

<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;
}

Answer 1

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

最近针对 Bootstrap 设置报告了类似的问题(请参阅:Bootstrap page opening vertically halfway down)。 OP 描述为打开一半，但当我查看它时，其行为与您的描述相似。 OP 自己发布了一个答案，说这是由于页面上使用了两次“jumbotron”类造成的。

这适用于你吗？

如果不是，那么这听起来像是一个 js 问题。