position: sticky;
position: sticky;the above example, the header and the text with blue background and class fixed hasposition: sticky;
The header's parent is the document, while the fixed div's parent is the main (with skyblue background)
The text acts as a relative positioned element until it's away 5px away from top. As the main element is scrolled, it acts as a fixed element
Similarly, the header text acts as a relative positioned element until it's away 0px away from top. As the page is scrolled it acts as a fixed element
header.hero {
position: sticky;
top: 5px;
}
main.main {
position: relative;
}
div.sticky {
position: sticky;
top: 5px;
}