4

As a user views a web page, they navigate to different sections of the page by scrolling. In Bootstrap's documentation, the bs-docs-sidenav list item changes color to reflect which section is currently 'active' (visible on screen).

  • Does this type of observation have a name (or names)?
  • Does the DOM have any properties that keep track of an element's location?
  • If not, are there any common plug-ins/small libraries to take advantage of this information?
HoppyKamper
  • 1,044
  • 9
  • 10
  • I think a similar question was asked here: http://stackoverflow.com/questions/7790725/javascript-track-mouse-position – neallred Jan 18 '16 at 22:19
  • Hi @neallred - the question you linked to is about tracking mouse position. I am looking for resources that detail how to observe sections of a web page (sections are somtimes identifed with `

    My Section

    `) as they reach the top of the viewport.     – HoppyKamper Jan 19 '16 at 16:02
  • [This](http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport) is a similar question. My approach to track nodes that I am considering now would be to register each "section" and use the getBoundingClientRect function to track registered sections and determine which section is "active". – HoppyKamper Jan 19 '16 at 19:27

1 Answers1

0

It turns out Bootstrap has a plugin called Scrollspy. The getBoundingClientRect function can be used to find an elements location.

HoppyKamper
  • 1,044
  • 9
  • 10