0

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?

Community
  • 1
  • 1
Solace
  • 8,612
  • 22
  • 95
  • 183

1 Answers1

2

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

Shikkediel
  • 5,195
  • 16
  • 45
  • 77
  • If you want, you can use the native `document.body.scrollTop` instead of `$(window).scrollTop()`, only use the jQuery version if it's necessary, and if you need to check on something else other than the body and want to use jQuery for element selection, then store the result in a variable. A scroll event could fire quite a few times in quick succession so it's best to keep the code inside it's handler as optimized as possible. – SeinopSys Apr 04 '15 at 10:05
  • I agree on the memory leak and coding vanilla JS where you can but using only `body` for scroll will exclude functionality on Mozilla and IE. – Shikkediel Apr 04 '15 at 10:12