3

I've got a fixed header element that I would like to stay fixed on scroll. The scrollable area, however, I would like it to be positioned directed after the fixed element, but I don't want to use position: absolute and remove it from the document flow.

I've created a Codepen here to illustrate the problem I'm having. I would like the red element (.top) to stick on scroll, without hiding the first list item.

Is there a way to go about doing this in CSS (possibly using flexbox) that doesn't require any JS?

Any help is appreciated.

Thanks in advance!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
realph
  • 4,481
  • 13
  • 49
  • 104

1 Answers1

1

If my understanding of your question is correct, you want to make no changes except for the scrollable content to not be hidden behind the fixed header.

The fixed header seems to have a natural height of nearly 20px.

So you can apply a top margin to the scrollable content which pushes it down from the top, until it clears the header.

Try adding this to your CSS:

div.list { margin-top: 20px;}

This will push the div containing all the list items 20px from the top.

DEMO: http://codepen.io/anon/pen/EVWYJd

UPDATE

The answer above works when the height of the fixed header is known. But based on feedback in the comments, the height of the header varies. So a solution is needed that keeps the scrollable content beneath the header regardless of the height of the header.

This issue has been addressed in these posts:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • This works and is probably what I would normally do, but I expect that sticky area to change height, and would like the list to position itself directly below the fixed area, no matter the size of it. If that makes sense? – realph Oct 01 '15 at 20:26
  • How is the height of the fixed header being calculated? – Michael Benjamin Oct 01 '15 at 20:26
  • That's the thing, I don't want to define it in the CSS. That fixed area will expand on click and I'd like the list to move down as the fixed area expands. – realph Oct 01 '15 at 20:29
  • I understand what you're saying. But like `position: absolute`, `position: fixed` takes the element out of the flow. So the scrollable content doesn't know the header exists. – Michael Benjamin Oct 01 '15 at 20:32
  • Yep, and that's the problem I'm trying to work around, and I guess there's not really a "dynamic" solution for this, other than setting the height value for the fixed element, and then adding that same value to the following divs `margin-top`. – realph Oct 01 '15 at 20:34
  • If we know how the height of the header is *calculated*, we can use that calculation for setting the top margin for the scrollable content. It doesn't need to be a fixed height value. The same dynamic calculation (if any) applied to the header, can be used for `margin-top` using [`calc`](http://www.w3.org/TR/css3-values/#calc-notation). – Michael Benjamin Oct 01 '15 at 20:35
  • I'm not sure I'm following Michael. Sorry, could you elaborate a bit more? – realph Oct 01 '15 at 20:39
  • Well, if we know how the header height is being calculated, that may help us set the `margin-top`. But if there is no calculation then this isn't an option. – Michael Benjamin Oct 01 '15 at 20:43
  • I updated my answer with further guidance. Hope it helps. – Michael Benjamin Oct 01 '15 at 20:53
  • The header height is being calculated by its child elements. I've kept the Codepen example rather simple, but I've got two elements inside the fixed element, and the fixed element inherits it's height based on the children. – realph Oct 01 '15 at 20:54
  • There are some pretty solid answers in the posts I just added to my answer. If nothing helps let me know and I'll continue working on this. – Michael Benjamin Oct 01 '15 at 20:55
  • 1
    Thank you! I'm going to opt for defining the height of the fixed area, and adding a top margin to the list, I guess it's the only sensible way to do it. Thank you for your answers too! – realph Oct 01 '15 at 21:02