Fixed element that moves to top of page on scroll - CSS only

Question

I'm looking to produce the effect that is on this page: http://jonrohan.me/guide/css/creating-triangles-in-css/ - but with just CSS, no JavaScript (this would be trivial with JavaScript).

The effect I'm talking about is as follows:

• Initially you see both the page header and the article title.
• when you scroll the page header disappears.
• The article title becomes fixed to the top of the page, so you always see it as you scroll.

The best I've managed to achieve so far is this:
http://jsfiddle.net/nottrobin/2FSvx/
But I don't like the duplication of the <nav> inherent in my solution.

Does anyone have any clever CSS/3 techniques they can think of to make it so that when you scroll down and the <header> disappears, the <nav> would naturally ride up to the top of the page?

Blossomblot

Considering that there is absolutely no scroll/position based selectors, I don't think so. You would be restricted to z-index tricks like you did yourself. – Shinto

Well I had several ideas - for example putting the <header> with the <nav> inside a position: fixed <div>, and then making the <header> static, with the hope that the <header> would scroll up and leave just the <nav> in the fixed <div>. Didn't work. Also tried absolutely positioning <header>, but that didn't work either. I still kinda hope there might be a hack to make the <header> not position: fixed but somehow have it still push down the <nav> element. Gonna keep playing. – Blossomblot

I think that would be impossible since the parent is a static element, the child will follow the parent always (assuming the parent is set to position: relative, which it must be for the child to follow it). – Shinto

@Shinto Yes I feared there probably was an insurmountable fundamental difference between the display modes. Incidentally, do you by any change know of a particularly good resource for explaining how elements with different positions (static, fixed, relative, absolute) interact with each other in different situations? – Blossomblot

I've found MDN is the best reference: developer.mozilla.org/en/CSS/position – Shinto

Answer 1

Your example has some issues, if I scroll the webpage down or up sometimes the two navs overlap and the content is displayed twice and overlapping.

As far as I know, there is no such technique to obtain the same effect using only CSS, JS is required.

You can position elements using CSS only in a static way (normal page flow), fixed way (relative to browser window), or absolute/relative (relative to the nearest parent with a position set to relative).

You cannot "listen" to a scroll event like you would do with JavaScript, hence you cannot position an element relative to the amount of scrolling, nor change its position value in real time, because you will need JavaScript even for this.

CSS is a presentational markup language, properties you assign to elements using CSS rules cannot be changed on an event-basis.

You could do something like you did, but that means more markup language, more CSS and more maintenance difficulties.

You should use JS to optimize the user's experience, if a user has JS disabled, he/she will see the normal page behavior, otherwise the nav element will remain still, like all other websites do.

Beater

Sorry to down-vote but this is not exactly an answer. Also for the over-judgemental "Your example is not good". I did notice the overlap, thought it wasn't the end of the world. – Blossomblot

You asked if there was a way to do it with CSS only. My answer is no. To me this is an answer. I even suggested your method has some issues. – Beater

Your answer is "As far as I know, no." No explanation of why, in terms of CSS theory, no references. It's helpful to point out issues, but less helpful to say something is "not good". – Blossomblot

You are absolutely right. I added some more informations to my answer, meanwhile I hope somebody will come out with a solution for this in CSS only! :) – Beater

Fair enough. You edited the answer. +1ed. Thanks. And I will try to mitigate the overlapping issue a bit. Still, I don't agree that this is an unreasonable thing to want to achieve in CSS - it is presentational after all. And I am still not 100% convinced that it is necessarily impossible - though it may well be - because people have achieved some pretty amazing things with CSS3 - making footers that are fixed to the bottom of the page, and even drawing triangles: goo.gl/HpFus and the opera logo in pure CSS: goo.gl/y9CQ. I'm not gonna give up for a week or so. – Blossomblot