Properties

The following properties are listed with their associated object as they relate to scroll position…

1. window.pageXOffset Alias for the window.scrollX
2. window.pageYOffset Alias for the window.scrollY
3. window.scrollX Distance from outer edge of browser the viewport scrolled horizontally
4. window.scrollY Distance from top of the viewport to the top of the scrollbar. Value will vary as you scroll downward.
5. document.documentElement.scrollTop Similar to window.scrollY (currently broken in WebKit based browsers)
6. document.body.scrollTop Wide support, but deprecated in strict mode

Offset Detection

Everyone loves something that sticks on scroll and in the following example I use window.pageYOffset detection to “stick” our centered text when the text reaches the top of the viewport.

To start things off I grab some variables and geometry as it’s always good to do the least amount of work inside a scroll handler (performance reasons). We retrieve the header and title selector along with both of their heights.

var header             = document.querySelector('header'),
    header_height      = getComputedStyle(header).height.split('px')[0],
    title              = header.querySelector('h1'),
    title_height       = getComputedStyle(title).height.split('px')[0],
    fix_class          = 'is--fixed';

At this point I determine how far the scrollbar has moved using window.pageYOffset (you could use scrollY as well). If the scroll position is greater than (header_height - title_height ) / 2 then a CSS class is added otherwise we remove the class.

function stickyScroll(e) {

  if( window.pageYOffset > (header_height - title_height ) / 2 ) {
    title.classList.add(fix_class);
  }

  if( window.pageYOffset < (header_height - title_height ) / 2 ) {
    title.classList.remove(fix_class);
  }
}

Looking even closer, all the above takes place when the viewport has scrolled enough to have the top of the text touch the top of the viewport. This means when window.pageYOffset is equal to the distance between the top of the window and the top of the text the text will “stick.”

To get at the math we know the text is in the middle of the viewport, so the vertical distance between the top edge of the text and the middle of the viewport is 1/2 it's height (refer to diagram in figure 4). This means the distance between the top of the window and the top of the text is 1/2 the viewport height (the vertical distance between the top of the viewport and middle middle of the viewport) minus half the text height. This is how we arrive at (header_height - title_height ) / 2.

ScrollTop Detection

In this example scrollTop is used to detect our trigger point at which we stick the main navigation to the top of the viewport. In this case we look for our scrollTop distance to report greater than or equal to the header height. If this value is met then we toggle a class and show the nav strip.

For this demo I determine what the height of the header and the hero is in order for me to get at my offset value (distance between my starting and ending point). In this particular instance I'm using the jQuery method $(window).scrollTop(), but you could also use document.body.scrollTop if you desire a vanilla approach. You can see all this taking place in Figure 6.

// Config
// =================================================

var $nav_header    = $('.banner'),
    header_height  = $('.banner').height(),
    hero_height    = $('.hero').height(),
    offset_val     = hero_height - header_height;


// Method
// =================================================

function navSlide() {
  var scroll_top = $(window).scrollTop();

  if (scroll_top >= offset_val) { // the detection!
    $nav_header.addClass('is-sticky');
  } else {
    $nav_header.removeClass('is-sticky');
  }
}

// Handler
// =================================================

$(window).scroll(navSlide);

Device Support

Back in the days prior to iOS 8, scroll events would never trigger unless your finger was removed from the screen. To prove how things have changed for the better here's a screencast of the iOS 7 scroll behavior (http://cl.ly/image/2I3g250Q052e). As you can see the text only sticks to the top when you lift your finger up. This is not due to iOS 7 pausing JavaScript execution, but pausing painting so your site's JavaScript will continue to run, but any changes to the DOM will not be painted until the scroll action completes.

Fast forward to current times and the results are far different now that iOS 8 has been released. As you can see in this screencast the scroll event reacts no matter if my finger is on the screen or not (http://cl.ly/image/3V0Z1N1R290B). The execution now triggers as it should (as the event takes place).

Notes

Tom Moitié discovered a strange result with window.scrollY when using dual monitors and shifting the position of the main monitor (found under system preferences on Mac). The same happens for window.scrollLeft with two monitors. For example, I have an Apple Studio Display (yup you heard that right) with a Samsung as my secondary monitor. The monitor on the right (Apple Studio Display) reports window.screenLeft as 0, but the Samsung monitor reports -1920 when I drag my browser over to that monitor (Samsung).

References & Such

• https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY
• https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollX
• http://api.jquery.com/scrolltop
• http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal
• http://stackoverflow.com/questions/21268450/body-scrolltop-is-deprecated-in-strict-mode-please-use-documentelement-scrollt