html - 粘性 header 卡在网站中间

Question

我创建了一个 header ，位置设置为粘性，顶部设置为 0。但是，如果我向下滚动页面，标题会在某个时候停止随页面滚动。

我认为这很容易解决，但我太笨了...

我试图删除其他元素，因为我认为它们与标题相交，但这并没有真正奏效。

header#navbar {
    grid-area: navbar;
    background-image: linear-gradient(to bottom, white, rgb(230, 230, 230));

    position: sticky;
    top: 0;

    z-index: 10;

    box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}

<header id="navbar">
    <div class="navbar"></div>
</header>

我希望标题始终位于视口(viewport)的顶部，并且不会在滚动的某个点消失。

Answer 1

你好 Squeez Music，欢迎来到 stackoverflow!

很遗憾，我们无法真正帮助您解决问题，因为您没有共享足够的代码。您共享的内容应该可以正常工作。为了演示我制作了一个片段，您会看到导航栏永远不会消失。

要弄清楚这个问题，最好自己制作一个片段来重现您遇到的问题。事实上，在这样做的过程中，您很可能会自己弄明白。

我说的是:

https://stackoverflow.com/help/minimal-reproducible-example

header#navbar {
        grid-area: navbar;
        background-image: linear-gradient(to bottom, white, rgb(230, 230, 230));

        position: sticky;
        top: 0;

        z-index: 10;

        box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
    }

<header id="navbar" style="padding: 5px">
    <div class="navbar">Check out my nav bar</div>
</header>
<div style="padding: 5px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius, nunc id pulvinar sagittis, enim sapien convallis ex, a egestas dui augue id ipsum. Nunc lorem neque, posuere ut neque eu, sagittis tristique massa. Suspendisse hendrerit velit augue, nec facilisis lorem finibus at. In lobortis finibus diam eget consectetur. Cras vitae dignissim est, id ornare quam. Integer convallis laoreet enim, sed consectetur tellus cursus in. Cras fermentum neque quis eleifend pretium. Vivamus maximus dui eu cursus rhoncus. Mauris bibendum venenatis quam non semper. Nam ut egestas libero. Aliquam rutrum risus at diam consequat, in viverra enim ultricies. Praesent vitae ullamcorper sapien. Quisque suscipit bibendum ex, id scelerisque metus. Sed id est sed sapien cursus sodales vitae non dui. Phasellus sit amet mauris a metus feugiat scelerisque nec non urna. Pellentesque lacinia ultricies ante, vel maximus nisl sagittis vitae.<br><br>
Aliquam aliquet sit amet erat sit amet tincidunt. Nullam et pulvinar mauris. Aenean rhoncus ut tellus in bibendum. Praesent sed consequat libero, interdum interdum lacus. Ut facilisis luctus neque ac maximus. Aenean ac maximus risus, eget vulputate tortor. Integer sed maximus odio. Fusce consectetur enim eu urna dignissim semper sit amet sed ipsum. Morbi consectetur diam sollicitudin orci ornare pellentesque. Donec nec justo ornare, tincidunt nulla ut, varius arcu. Quisque ac ipsum at nunc aliquam efficitur.<br><br>
Phasellus aliquam ornare augue nec faucibus. Etiam iaculis tincidunt feugiat. Nam auctor fringilla nunc, eu dictum odio gravida id. Donec vitae turpis ut nisl condimentum gravida. Aenean eleifend tellus arcu, non vestibulum eros cursus vel. Sed id lacinia magna. Curabitur mattis eleifend pharetra. Proin ut arcu ultricies, gravida turpis sit amet, auctor augue. Sed dictum gravida dictum.<br><br>
Suspendisse in felis mollis, condimentum nulla vel, mollis neque. Integer sagittis, sem eu lobortis ultricies, dolor tellus vestibulum lorem, sed elementum dui tortor vitae neque. Donec id massa eget enim laoreet lacinia in id arcu. Praesent consectetur dolor a nibh aliquam ullamcorper. In vehicula mollis tellus ut ornare. Quisque fringilla dignissim nisi quis tempus. Integer aliquet orci quam, vitae rutrum turpis sollicitudin ullamcorper. Pellentesque imperdiet ac orci quis tempor. Sed a lobortis odio.<br><br>
Nullam in massa id ligula pellentesque convallis. Morbi sagittis consectetur dui in mollis. Mauris a ultrices mi. Suspendisse vulputate vulputate vehicula. Curabitur sit amet sem nunc. Vestibulum vitae convallis libero. Vivamus imperdiet in tortor id suscipit.

Donec venenatis quam sagittis risus iaculis accumsan. Praesent egestas tincidunt placerat. Nulla fringilla sodales velit, vitae interdum mauris iaculis et. Donec tempor dignissim magna non ultrices. Etiam arcu ipsum, interdum in mi mattis, laoreet tincidunt magna. In eu est leo. Cras dapibus, ante sit amet viverra accumsan, dolor ipsum eleifend nibh, sit amet rhoncus enim felis a felis. Fusce quis odio lobortis, eleifend urna nec, aliquet orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce molestie a tellus quis fringilla. Aenean condimentum, ligula vel vulputate euismod, ipsum urna malesuada lorem, laoreet eleifend turpis felis vel mi.<br><br>
Morbi interdum, ligula ornare cursus auctor, felis sapien faucibus tellus, nec pretium eros nisi at arcu. Aliquam a neque risus. Fusce ultricies metus turpis, sed semper enim maximus tincidunt. Integer sed tortor ut orci fermentum commodo ac id lacus. Maecenas viverra neque eget ipsum semper, in finibus sapien pretium. Phasellus pretium gravida magna ut commodo. Ut vel ultrices lorem, commodo euismod dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vestibulum malesuada metus nec pretium.<br><br>
Curabitur mattis scelerisque porta. Morbi quis viverra lacus, id imperdiet nunc. Sed facilisis, arcu quis varius vulputate, sem diam luctus nunc, non rutrum felis purus eget ex. Nam condimentum fringilla maximus. Vivamus interdum rutrum sodales. Proin fermentum lacus hendrerit pretium tempor. Mauris eleifend molestie massa a placerat. Sed in lobortis massa. Ut in tincidunt dui. Pellentesque ultrices finibus magna ac faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris odio ligula, luctus eget ultrices ac, pellentesque sit amet arcu. Morbi eu metus augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius, nunc id pulvinar sagittis, enim sapien convallis ex, a egestas dui augue id ipsum. Nunc lorem neque, posuere ut neque eu, sagittis tristique massa. Suspendisse hendrerit velit augue, nec facilisis lorem finibus at. In lobortis finibus diam eget consectetur. Cras vitae dignissim est, id ornare quam. Integer convallis laoreet enim, sed consectetur tellus cursus in. Cras fermentum neque quis eleifend pretium. Vivamus maximus dui eu cursus rhoncus. Mauris bibendum venenatis quam non semper. Nam ut egestas libero. Aliquam rutrum risus at diam consequat, in viverra enim ultricies. Praesent vitae ullamcorper sapien. Quisque suscipit bibendum ex, id scelerisque metus. Sed id est sed sapien cursus sodales vitae non dui. Phasellus sit amet mauris a metus feugiat scelerisque nec non urna. Pellentesque lacinia ultricies ante, vel maximus nisl sagittis vitae.<br><br>
Aliquam aliquet sit amet erat sit amet tincidunt. Nullam et pulvinar mauris. Aenean rhoncus ut tellus in bibendum. Praesent sed consequat libero, interdum interdum lacus. Ut facilisis luctus neque ac maximus. Aenean ac maximus risus, eget vulputate tortor. Integer sed maximus odio. Fusce consectetur enim eu urna dignissim semper sit amet sed ipsum. Morbi consectetur diam sollicitudin orci ornare pellentesque. Donec nec justo ornare, tincidunt nulla ut, varius arcu. Quisque ac ipsum at nunc aliquam efficitur.<br><br>
Phasellus aliquam ornare augue nec faucibus. Etiam iaculis tincidunt feugiat. Nam auctor fringilla nunc, eu dictum odio gravida id. Donec vitae turpis ut nisl condimentum gravida. Aenean eleifend tellus arcu, non vestibulum eros cursus vel. Sed id lacinia magna. Curabitur mattis eleifend pharetra. Proin ut arcu ultricies, gravida turpis sit amet, auctor augue. Sed dictum gravida dictum.<br><br>
Suspendisse in felis mollis, condimentum nulla vel, mollis neque. Integer sagittis, sem eu lobortis ultricies, dolor tellus vestibulum lorem, sed elementum dui tortor vitae neque. Donec id massa eget enim laoreet lacinia in id arcu. Praesent consectetur dolor a nibh aliquam ullamcorper. In vehicula mollis tellus ut ornare. Quisque fringilla dignissim nisi quis tempus. Integer aliquet orci quam, vitae rutrum turpis sollicitudin ullamcorper. Pellentesque imperdiet ac orci quis tempor. Sed a lobortis odio.<br><br>
Nullam in massa id ligula pellentesque convallis. Morbi sagittis consectetur dui in mollis. Mauris a ultrices mi. Suspendisse vulputate vulputate vehicula. Curabitur sit amet sem nunc. Vestibulum vitae convallis libero. Vivamus imperdiet in tortor id suscipit.<br><br>
Donec venenatis quam sagittis risus iaculis accumsan. Praesent egestas tincidunt placerat. Nulla fringilla sodales velit, vitae interdum mauris iaculis et. Donec tempor dignissim magna non ultrices. Etiam arcu ipsum, interdum in mi mattis, laoreet tincidunt magna. In eu est leo. Cras dapibus, ante sit amet viverra accumsan, dolor ipsum eleifend nibh, sit amet rhoncus enim felis a felis. Fusce quis odio lobortis, eleifend urna nec, aliquet orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce molestie a tellus quis fringilla. Aenean condimentum, ligula vel vulputate euismod, ipsum urna malesuada lorem, laoreet eleifend turpis felis vel mi.<br><br>
Morbi interdum, ligula ornare cursus auctor, felis sapien faucibus tellus, nec pretium eros nisi at arcu. Aliquam a neque risus. Fusce ultricies metus turpis, sed semper enim maximus tincidunt. Integer sed tortor ut orci fermentum commodo ac id lacus. Maecenas viverra neque eget ipsum semper, in finibus sapien pretium. Phasellus pretium gravida magna ut commodo. Ut vel ultrices lorem, commodo euismod dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vestibulum malesuada metus nec pretium.<br><br>
Curabitur mattis scelerisque porta. Morbi quis viverra lacus, id imperdiet nunc. Sed facilisis, arcu quis varius vulputate, sem diam luctus nunc, non rutrum felis purus eget ex. Nam condimentum fringilla maximus. Vivamus interdum rutrum sodales. Proin fermentum lacus hendrerit pretium tempor. Mauris eleifend molestie massa a placerat. Sed in lobortis massa. Ut in tincidunt dui. Pellentesque ultrices finibus magna ac faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris odio ligula, luctus eget ultrices ac, pellentesque sit amet arcu. Morbi eu metus augue.</div>