The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript scroll effect

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #161983

    On 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?



    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 :

    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?



    Thought I should add this nice bit of code. Source:

    // Determine if an element is in the visible viewport
    function isInViewport(element) {
        var rect = element.getBoundingClientRect();
        var html = document.documentElement;
        return (
 >= 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().
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.