粘性标头卡在网站中间

Question

我创建了一个标头，其位置设置为粘滞，顶部为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>

我希望标题在整个过程中都位于视口的顶部，并且不会在滚动时消失。

Answer 1

你好，Squeez音乐，欢迎来到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>

Answer 2

标题位于__body内部，它是粘性容器。 __body的高度是100%的{​​{1}}，其上限为body。由于内容比100vh长，因此内容溢出，并且主体的实际高度大于100%，因此滚动。由于粘性物品受其容器的限制，因此当物品到达中心（粘性容器的末端）时，它将滚动出。

示例：

100vh

body {
  height: 100vh;
  margin: 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);
}

.__body {
  height: 100%;
  background: red;
}

该解决方案很容易使<div class="__body"> <header id="navbar"> <div class="navbar">Navbar</div> </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis quis justo ut bibendum. Praesent sapien elit, pellentesque quis egestas nec, hendrerit a velit. Sed eleifend euismod nibh sit amet dignissim. Vivamus tempus neque enim, eu facilisis ligula eleifend vitae. Pellentesque accumsan vestibulum erat. Sed ut interdum nunc, vitae volutpat tellus. Vestibulum accumsan egestas finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id nisl nulla. Suspendisse ligula ligula, bibendum sit amet aliquam non, mollis in urna. Suspendisse quis dictum augue. Mauris magna est, luctus id eros vel, interdum lacinia eros. Ut eget nisl at lectus scelerisque vulputate. Etiam viverra maximus orci ut tempus. Pellentesque aliquam lectus ac nisi efficitur fringilla. Sed ut leo eget est interdum pharetra. Sed turpis ex, egestas nec vehicula sit amet, sagittis nec est. Nulla sapien mauris, mattis sit amet dui id, cursus aliquet ligula. Etiam eu orci eget ante faucibus dapibus ac sit amet ligula. Quisque eget porttitor sapien. Donec elementum urna quam. Morbi vehicula augue et metus eleifend, at aliquet erat sodales. Mauris et tempus orci. Morbi sagittis arcu nisl, eget molestie tortor consequat et. Integer vehicula consequat risus. Vivamus eros ipsum, maximus nec orci blandit, semper commodo dui. Praesent ut dapibus justo, non elementum ligula. Aenean sagittis odio quis malesuada fermentum. Pellentesque vestibulum sem a urna cursus dapibus. Praesent ultricies sapien sed turpis dictum faucibus. Maecenas sollicitudin at justo quis accumsan. Vivamus facilisis purus felis, eu bibendum nunc tincidunt et. Aliquam purus ex, suscipit ut nibh at, vulputate consectetur est. Sed venenatis, elit vitae consectetur iaculis, sem nunc consequat mauris, nec gravida enim orci et dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis interdum aliquam. Duis vehicula orci a pretium semper. Aliquam egestas consequat libero in interdum. Aliquam mi leo, sodales nec turpis bibendum, cursus posuere turpis. Proin vehicula magna eu libero aliquet, interdum mollis orci tincidunt. Etiam feugiat euismod magna, vel lacinia velit condimentum ac. Maecenas diam dui, aliquet non euismod at, suscipit a nulla. Aliquam elit enim, efficitur sit amet neque non, feugiat tristique enim. Ut aliquet maximus lacus, eget euismod quam. Donec vehicula ex at libero sodales, sit amet faucibus velit facilisis. Morbi risus tortor, sollicitudin at lorem quis, convallis molestie enim. Proin efficitur libero leo, et fermentum velit eleifend in. Etiam vitae suscipit arcu. Nunc eu aliquam quam, a sollicitudin enim. Vivamus porttitor id nisl id pharetra. Sed consequat semper orci, sed iaculis arcu convallis sit amet. Donec vitae elementum nunc, ullamcorper accumsan tellus. Cras eu cursus ante. Sed efficitur, massa a viverra scelerisque, mi magna tincidunt ipsum, ac laoreet lacus nunc quis mi. Pellentesque ut rutrum felis. Morbi euismod nisi elit, ac tristique arcu semper eget. Suspendisse orci augue, auctor quis dapibus vitae, laoreet in quam. In sagittis, odio sed suscipit mattis, risus sapien faucibus nisl, nec commodo nunc urna sit amet urna. Nulla lobortis, tellus nec auctor fermentum, lacus sapien rhoncus quam, at finibus lacus leo vel nisl. Integer eu aliquet erat. Suspendisse maximus blandit ultrices. Nunc sodales eu erat sit amet tincidunt. Nulla molestie nulla ut lectus luctus, vitae sollicitudin mi feugiat. Proin interdum elit quis lorem rhoncus ultricies. Mauris ac dui sit amet nulla lacinia venenatis in sit amet odio. </div>与内容一起增长。

__body

body {
  margin: 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);
}

.__body {
  min-height: 100vh;
  background: red;
}

Answer 3

我认为您的问题来自grid-template-rows选择器中的__body。您这里有170％，标头仅停留在其父级内。 尝试：

    .__body {
 display: grid;
 grid-template-rows: 5.88% 17.64% 23.53% 29.11% 11.76% 11.76%;

您可能要尝试使用％以外的其他单元来使流体更加流畅。

[edit]基本上就是Ori Drori所说的：）

Answer 4

我找到了一种方法，通过将标头固定位置而不是粘性的并赋予其宽度和高度来使其工作。