www.microsoft.com/ceo scroll effect

[welshmark]

Hi,
On http://www.microsoft.com/ceo there are blue markers on the right hand side of the screen that show the readers position on the page.

Is there a simple preferably jQuery way to achieve this?

Thanks

[dyr]

The core components of that effect are

• Know the page height [ $(window).height() ] // simple with jQuery, a little more of a pain in vanilla JS
• Know how far down the page a user has scrolled [ body.scrollTop() ]
• Know each section’s top offset and height [ elem.offset().top, elem.outerHeight(true) ]
• Reverse engineer which elements are “visible on screen” by comparing body top offset to each element’s top offset
• Some logic that updates the dots on the side

Really basic example : http://codepen.io/shawkdsn/pen/rLIgC

This excerpt makes the navigation dots dynamically. There’s a lot more one could do to generalize and encapsulate this into a reusable plugin, but why reinvent the wheel? https://github.com/imakewebthings/jquery-waypoints

Cheers

[dyr]

Thought I should add this nice bit of code. Source: http://blog.adtile.me/2014/01/16/a-dive-into-plain-javascript/

// Determine if an element is in the visible viewport
function isInViewport(element) {
    var rect = element.getBoundingClientRect();
    var html = document.documentElement;
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || html.clientHeight) &&
      rect.right <= (window.innerWidth || html.clientWidth)
    );
  }

The above function could be used by adding a “scroll” event listener to the window and then calling isInViewport().

[Author]

Posts