Sticky positioning won't work, no overflow or height adjustment

Question

I'm new to HTML/CSS and am building a simple test site. Currently, I am trying to get sticky positioning to work. Specifically, I have a title/logo area with a toolbar underneath. As you scroll down, I want the title to scroll away, but the toolbar to scroll until it reaches the top of the page, where it'll remain.

I've tried removing all size adjustments, padding, and margins. I read that height adjustments can cause problems, so I thought I'd try all of those. I don't have any overflow either. I also tried putting the sticky position on all of the different elements. It's still not working and I don't understand why.

Any advice would be greatly appreciated. Thanks!

My code:

h1 {
  background-color: lightblue;
  text-align: center;
}

.toolbar {
  border: 3px double black;
  background-color: coral;
  padding: 5px;
  text-align: center;
  width: 80%;
  max-width: 650px;
  margin: auto;
  position: sticky;
  top: 0px;
  margin: auto;
}

main {
  height: 200vh;
}

a {
  display: inline-block;
  color: black;
  background-color: lightblue;
  list-style-type: none;
  border: 1px solid black;
  width: 100px;
  font-size: 20px position:sticky;
}

a:link {
  text-decoration: none;
  color: red;
}

<header>
  <h1>Title Area</h1>
  <h2>"Awesome Tagline!"</h2>
  <hr>
</header>

<nav>
  <ul class="toolbar">
    <a href="">
      <li>Home</li>
    </a>
    <a href="">
      <li>About</li>
    </a>
    <a href="">
      <li>Menu</li>
    </a>
    <a href="">
      <li>Other</li>
    </a>
  </ul>
</nav>

<main></main>

score 0 · Answer 1 · answered Mar 24 '21 at 14:00

0

position: sticky; will scroll for the parents height, so for you it will be for as long as nav is present on the screen. So in your case you need to put the position: sticky; on the <nav class="some-class">...</nav>.

Not sure if that was your correct html but you are missing the <body> element.

answered Mar 24 '21 at 14:00

Dejan.S

18,571
22
69
112

I tried that, but it still didn't work. I also tried putting it all in a div just to see and adding the positioning there, but nothing. Also, I have the body and all of that, I just didn't add it to the code here so i could keep it minimal. I checked for typos too. Could be I missed something when moving things around though. Or could it be a browser issue? I'm using chrome – Biscuit Mar 24 '21 at 14:16
@Biscuit the only browser not supporting `position: sticky; ` is the old IE. Every other browser does. But this should actually work as my anwser shows. – tacoshy Mar 24 '21 at 14:38

score 0 · Answer 2 · answered Mar 24 '21 at 14:01

This doesnt work because the .toolbar is a child element of the <nav> tag. A sticky element it must stay within its parent. if the parent leaves the screen, so does the child element (.toolbar). Move the sticky property to the <nav> tag:

Delete this line:

.toolbar { position: sticky; top: 0; }

Add this line:

nav { position: sticky; top: 0; }

h1 {
  background-color: lightblue;
  text-align: center;
}

.toolbar {
  border: 3px double black;
  background-color: coral;
  padding: 5px;
  text-align: center;
  width: 80%;
  max-width: 650px;
  margin: auto;
  margin: auto;
}

nav {
  position: sticky;
  top: 0px;
}

main {
  height: 200vh;
}

a {
  display: inline-block;
  color: black;
  background-color: lightblue;
  list-style-type: none;
  border: 1px solid black;
  width: 100px;
  font-size: 20px position:sticky;
}

a:link {
  text-decoration: none;
  color: red;
}

<header>
  <h1>Title Area</h1>
  <h2>"Awesome Tagline!"</h2>
  <hr>
</header>

<nav>
  <ul class="toolbar">
    <a href="">
      <li>Home</li>
    </a>
    <a href="">
      <li>About</li>
    </a>
    <a href="">
      <li>Menu</li>
    </a>
    <a href="">
      <li>Other</li>
    </a>
  </ul>
</nav>

<main></main>

Sticky positioning won't work, no overflow or height adjustment

2 Answers2