CSS3: Is it possible to fire a transition on an element when the page is scrolled down the first viewport?

Question

By Viewport, I mean the " first viewport the user sees when they visit the webpage - before they have scrolled down" .

1. So is it possible to change the class name of an element when the page is scrolled down to below the first viewport (that is the user has scrolled down to the point when 'the part of the page which was visible before scrolling down' is no more visible), and also change the value of style attribute, using CSS3 only?

2. If I use JavaScript , can somebody tell me what is it that triggers the change of background-color - is it the invisibilty of the first viewport (because the current scroll position is below it on the page), or appearance of the content below the first viewport?

3. By the way, what is the correct name for the part of a webpage which i am ridiculously calling the first viewport ?

Answer 1

Dunno, landing screen (3) maybe? Sounds pretty much like a JavaScript thing for the rest. Sticky header is probably a good search term for it but there are several approaches. In this case it looks like after having scrolled to a certain point they give it a fixed position, change the logo and add a white background. Not too complicated to do with jQuery .css , dependent on $(window).scrollTop() .

Another approach could be to have two headers, hide the second one by default and fade/slide it in when the user scrolls to or between a certain position. This plugin makes a clone for example :

http://codepen.io/senff/pen/ayGvD