CSS "position: sticky" not sticking [duplicate] - html

Question

This question already has an answer here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Closed 4 years ago.
I'm making my first website and I want to make the tab bar to stick to the top of the screen and stay on screen when you scroll, but position:sticky doesn't seem to be doing this.
div#tabBar {
position: sticky;
top: 0;
display: flex;
flex-direction: row;
background-color: #29335C;
}
<div>
<div id="tabBar">
<a class="tabLinks">Home</a>
<a class="tabLinks">About Me</a>
</div>
<h1 id="homeFrame">Anna Grace</h1>
<div id="projectList"></div>
</div>

Answer 1

If you want it to the top of the screen, simply switch to position: fixed;
Position fixed is always relative to the upper left corner of the window, which is convinient in your case. Be aware that, because a fixed elenmet has no width, the content will start under/behind it. You might wat to give your body a padding top equal to the height of your header.
Position sticky works differently. It remains as a block/normal element until it's at the given top position, than it switches to fixed behaviour. Think like those advertisements that appear nexto content and stay where they are when you scroll down.
In your case the difference will be minimal, as the header start at 0, so it instanly switches to fixed,it just might behave a little more unpredictable.

Answer 2

it's works. I deleted parent div.
#tabBar{
position: sticky;
top:0;
background-color: #29335C;
display:flex;
flex-direction:row;
}
p {
font-size:36px;
}
<div id="tabBar">
<a class="tabLinks">Home</a>
<a class="tabLinks">About Me</a>
</div>
<div id="projectList"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus necessitatibus ad voluptates? Libero harum perspiciatis incidunt voluptatum aliquam magni facere officia debitis? Placeat, saepe dolores praesentium culpa a voluptate quia?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus necessitatibus ad voluptates? Libero harum perspiciatis incidunt voluptatum aliquam magni facere officia debitis? Placeat, saepe dolores praesentium culpa a voluptate quia?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel, deleniti blanditiis neque id libero, sit consectetur harum optio omnis dolorem quo laborum quaerat doloremque ullam corporis pariatur sunt excepturi maiores!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non neque error quod nam repellat placeat vitae odit, nulla a deserunt nostrum est nihil sed dicta accusamus molestiae recusandae modi saepe.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eligendi quod accusamus dignissimos minus eum dolorum, commodi enim asperiores dicta nesciunt officiis praesentium quasi voluptas, explicabo sapiente neque atque perferendis!</p>

Answer 3

give outer div some height and the try. thanks
div#tabBar {
position: sticky;
top: 0;
display: flex;
flex-direction: row;
background-color: #29335C;
}
.outer{
height:1000px}
<div class="outer">
<div id="tabBar">
<a class="tabLinks">Home</a>
<a class="tabLinks">About Me</a>
</div>
<h1 id="homeFrame">Anna Grace</h1>
<div id="projectList"></div>
</div>