Заголовок находится внутри __body, который является липким контейнером.Высота __body равна 100% из 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;
}
<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>