position sticky with a 3 rows header

Question

I have a 3 rows header and I need the middle row to be sticky, I tried using position: sticky but since it's relative to the element's parent I'm unable to achieve the result that I want.

Here's a fiddle: https://jsfiddle.net/8sczt7u1/2/

I was going for a CSS only solution but I'm well aware that this is a very particular case so I'm open to javascript as well.

*I'm unable to achieve the result that I want.* --> and what do you want? — Temani Afif, Oct 08 '20 at 14:53
@TemaniAfif "I have a 3 rows header and I need the middle row to be sticky" isn't that clear enough? — MIkeMo, Oct 08 '20 at 15:19

score 3 · Answer 1 · answered Oct 08 '20 at 14:52

Just add a display inline to your header tag

body {
  margin: 0;
}

.page-content {
  min-height: 200vh;
}

header {
  position: relative;
  display: inline;
}

.top-bar {
  background: blue;
  color: white;
  padding: 5px 20px;
  text-align: center;
}

.main-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px;
  position: sticky;
  top: 0;
  background-color: grey;
  &__nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    li {
      margin: 0 0 0 10px;
    }
  }
}

.promo-bar {
  background: red;
  color: white;
  padding: 5px 20px;
  text-align: center;
}

<header class="header">
  <div class="top-bar">Lorem ipsum dolor sit amet</div>
  <div class="main-bar">
    <div class="main-bar__logo">Logo</div>
    <ul class="main-bar__nav">
      <li><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
    </ul>
  </div>
  <div class="promo-bar">Lorem ipsum dolor sit amet consecur bla bla bla</div>
</header>

<div class="page-content"></div>

That's actually a very good hack, thanks for sharing. – MIkeMo Oct 08 '20 at 15:15 — MIkeMo, Oct 08 '20 at 15:15
@mIkeMo happy to help :) – Alexandre Elshobokshy Oct 08 '20 at 15:28 — Alexandre Elshobokshy, Oct 08 '20 at 15:28

score 1 · Answer 2 · answered Oct 08 '20 at 15:12

1

So I fixed it by removing the wrapper around my 3 rows and using the <header> tag as the main row wrapper

https://jsfiddle.net/yvgLaq5f/

answered Oct 08 '20 at 15:12

MIkeMo

332
1
3
10

score -2 · Answer 3 · answered Oct 08 '20 at 14:59

-2

Your code is working correctly. position: sticky operates within its container i.e. `header.

You can set the header height: 500px and see this.

answered Oct 08 '20 at 14:59

Alexandr

522
2
10

I'm aware that it's working as intented, the goal was to have the middle row be sticky throughout the entire page. Thanks for suggestion though I appreciate your time. – MIkeMo Oct 08 '20 at 15:28
2

Any code is working as intended in that case lol, but that doesn't answer his question – Alexandre Elshobokshy Oct 08 '20 at 15:31

position sticky with a 3 rows header

3 Answers3