Make a shrinkable header with "sticky"

Question

I'd like to make a part of my header stick on scroll while the top part disappear:

body {
  /* Allows to scroll */
  width: 15em;
}

header {
  width: 100%;
}

header a {
  display: block;
  background-color: red;
}

#title {
  position: sticky;
  top: 0;
}

<body>
  <header>
    <h1>
      <a href="index.html">
        <div id="caption">Some text</div>
        <div id="title">Main title</div>
      </a>
    </h1>
  </header>
  <p>Distinctio ut totam quos aliquam et voluptas delectus vitae. Aut optio inventore repudiandae nemo consequatur dolores impedit. Rerum fuga repellat illum culpa qui aut est qui. Qui deleniti mollitia incidunt deleniti officiis aliquid ipsam. Sed molestiae porro consequatur blanditiis deserunt temporibus. Natus autem veritatis illo totam cupiditate quidem qui.</p>
  <p>Tempore dolor est omnis rem. Reiciendis architecto quisquam dolor. Dolorem minus ea expedita quo sunt. Adipisci totam cum omnis omnis. Voluptas similique amet magnam consequatur consequatur animi et nihil. Sequi tenetur tempora magnam quaerat est voluptatem.</p>
  <p>Magni voluptas et cum. Voluptatum omnis libero odit eligendi. Consequuntur provident fuga qui eveniet similique. Non voluptatem et rerum. Iste corrupti perspiciatis atque.</p>
  <p>Recusandae in est enim. Occaecati optio consequatur atque perferendis veritatis. Est aut cupiditate ea. Corrupti cumque quia accusamus ut perspiciatis qui ea.</p>
  <p>Quisquam rerum voluptas voluptas corrupti quaerat. Tempore totam nemo numquam a modi similique. Veritatis eos nobis laudantium delectus. Laboriosam in incidunt esse quo provident ut necessitatibus consequuntur.</p>
</body>

But as you can see, that doesn't work as intended. How can I achieve that?

Possible duplicate of ["Position: sticky;" not Working CSS and HTML](https://stackoverflow.com/questions/43707076/position-sticky-not-working-css-and-html) — the_legitTDM, Aug 06 '19 at 13:28
https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46 — Luís P. A., Aug 06 '19 at 14:47

score 2 · Answer 1 · answered Aug 06 '19 at 13:28

sticky need to be on the h1 element and you consider negative top value to achieve whant you want but you need to find the correct value based on the height of the caption

body {
  /* Allows to scroll */
  width: 15em;
}

header {
  position: sticky;
  top: -40px;
}

header a {
  display: block;
  background-color: red;
}

<body>
  <header>
    <h1>
      <a href="index.html">
        <div id="caption">Some text</div>
        <div id="title">Main title</div>
      </a>
    </h1>
  </header>
  <p>Distinctio ut totam quos aliquam et voluptas delectus vitae. Aut optio inventore repudiandae nemo consequatur dolores impedit. Rerum fuga repellat illum culpa qui aut est qui. Qui deleniti mollitia incidunt deleniti officiis aliquid ipsam. Sed molestiae
    porro consequatur blanditiis deserunt temporibus. Natus autem veritatis illo totam cupiditate quidem qui.</p>
  <p>Tempore dolor est omnis rem. Reiciendis architecto quisquam dolor. Dolorem minus ea expedita quo sunt. Adipisci totam cum omnis omnis. Voluptas similique amet magnam consequatur consequatur animi et nihil. Sequi tenetur tempora magnam quaerat est voluptatem.</p>
  <p>Magni voluptas et cum. Voluptatum omnis libero odit eligendi. Consequuntur provident fuga qui eveniet similique. Non voluptatem et rerum. Iste corrupti perspiciatis atque.</p>
  <p>Recusandae in est enim. Occaecati optio consequatur atque perferendis veritatis. Est aut cupiditate ea. Corrupti cumque quia accusamus ut perspiciatis qui ea.</p>
  <p>Quisquam rerum voluptas voluptas corrupti quaerat. Tempore totam nemo numquam a modi similique. Veritatis eos nobis laudantium delectus. Laboriosam in incidunt esse quo provident ut necessitatibus consequuntur.</p>
</body>

IIUW, sticky does only work relatively to the parent, so I cannot make something stick to the top of the page, if "body" isn't the parent, doesn't it? — Boiethios, Aug 06 '19 at 13:34
sticky have its parent as the boundaries. So the element can only sticky inside the parent area but the scroll can be within an upper element. header here is not the only element isnide body so there is some space to sticky unlike element inside header. Check this for more detailed explanation and examples:https://stackoverflow.com/a/54610362/8620333 — Temani Afif, Aug 06 '19 at 13:38
@FrenchBoiethios more related questions if you want: https://stackoverflow.com/a/55601002/8620333 / https://stackoverflow.com/a/52997848/8620333 — Temani Afif, Aug 06 '19 at 13:41

Pierre-Yves Legeay · Answer 2 · 2019-08-06T13:54:28.570

From the MDN : "stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent."
Here its parent is <a href="index.html"> so when you scroll, #title will scroll up with its parent.

If you want #title to stick to the top of the body you need the body to be its direct parent.

In the snippet I used both position: sticky; and position: -webkit-sticky; because Safari need the prefix.

body {
  /* Allows to scroll */
  width: 15em;
}

header {
  width: 100%;
}

header a {
  display: block;
  background-color: red;
}

#title {
  background-color: red;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

<body>
  <header>
    <h1>
      <a href="index.html">
        <div id="caption">Some text</div>
      </a>
    </h1>
  </header>
  <div id="title"><a href="index.html"><h1>Main title</h1></a></div>
  <p>Distinctio ut totam quos aliquam et voluptas delectus vitae. Aut optio inventore repudiandae nemo consequatur dolores impedit. Rerum fuga repellat illum culpa qui aut est qui. Qui deleniti mollitia incidunt deleniti officiis aliquid ipsam. Sed molestiae porro consequatur blanditiis deserunt temporibus. Natus autem veritatis illo totam cupiditate quidem qui.</p>
  <p>Tempore dolor est omnis rem. Reiciendis architecto quisquam dolor. Dolorem minus ea expedita quo sunt. Adipisci totam cum omnis omnis. Voluptas similique amet magnam consequatur consequatur animi et nihil. Sequi tenetur tempora magnam quaerat est voluptatem.</p>
  <p>Magni voluptas et cum. Voluptatum omnis libero odit eligendi. Consequuntur provident fuga qui eveniet similique. Non voluptatem et rerum. Iste corrupti perspiciatis atque.</p>
  <p>Recusandae in est enim. Occaecati optio consequatur atque perferendis veritatis. Est aut cupiditate ea. Corrupti cumque quia accusamus ut perspiciatis qui ea.</p>
  <p>Quisquam rerum voluptas voluptas corrupti quaerat. Tempore totam nemo numquam a modi similique. Veritatis eos nobis laudantium delectus. Laboriosam in incidunt esse quo provident ut necessitatibus consequuntur.</p>
</body>

*so when you scroll, #title will cover #caption* --> title will never cover the caption since it's at the bottom and the sticky is defined to be top — Temani Afif, Aug 06 '19 at 13:42
Yes thanks ! There is no scrolling inside the h1... so no sticking to the top of it. — Pierre-Yves Legeay, Aug 06 '19 at 13:49

Make a shrinkable header with "sticky"

2 Answers2