2

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>
doğukan
  • 23,073
  • 13
  • 57
  • 69
A Grace
  • 27
  • 4
  • Hi! Please explain in more detail what is your intended result. "Isn't working" does not tell us what is not working as you expect. – Esko Jan 10 '19 at 13:33
  • But your sample code is working fine. Set height of top-most div to e.g. 5000px. Maybe you try to use it on non-supporting browser? Or you do not understand how it should work? – Justinas Jan 10 '19 at 13:35
  • remove the extra div – Temani Afif Jan 10 '19 at 13:36
  • https://developer.mozilla.org/en-US/docs/Web/CSS/position: *A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.* - your container div does not scroll so it will move with the screen. If you just want to fix it with regards to the viewport, use position fixed instead – Pete Jan 10 '19 at 13:36
  • https://www.sitepoint.com/css-position-sticky-introduction-polyfills/ – yunzen Jan 10 '19 at 13:38
  • @Esko Edited it so it's clearer – A Grace Jan 10 '19 at 13:52

3 Answers3

2

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.

Martijn
  • 15,791
  • 4
  • 36
  • 68
0

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>
doğukan
  • 23,073
  • 13
  • 57
  • 69
-1

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>
Xenio Gracias
  • 2,728
  • 1
  • 9
  • 16