Skip to content

Instantly share code, notes, and snippets.

@pascaldevink

pascaldevink/scrollspy.js

Created April 13, 2012 20:53
Show Gist options
  • Save pascaldevink/2380129 to your computer and use it in GitHub Desktop.
Save pascaldevink/2380129 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Pascal de Vink revised this gist Apr 16, 2012. 1 changed file with 17 additions and 0 deletions.
    17 changes: 17 additions & 0 deletions scrollspy.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,20 @@
    /*
    Copyright (C) 2021 Pascal de Vink (Tweakers.net)
    This library is free software; you can redistribute it and/or
    modify it under the terms of the GNU Lesser General Public
    License as published by the Free Software Foundation; either
    version 2.1 of the License, or (at your option) any later version.
    This library is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
    Lesser General Public License for more details.
    You should have received a copy of the GNU Lesser General Public
    License along with this library; if not, write to the Free Software
    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
    */
    var ScrollSpy = (function()
    {
    var elements = {};
  2. Pascal de Vink created this gist Apr 13, 2012.
    96 changes: 96 additions & 0 deletions scrollspy.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,96 @@
    var ScrollSpy = (function()
    {
    var elements = {};

    function init()
    {
    if (document.addEventListener)
    {
    document.addEventListener("touchmove", handleScroll, false);
    document.addEventListener("scroll", handleScroll, false);
    }
    else if (window.attachEvent)
    {
    window.attachEvent("onscroll", handleScroll);
    }
    }

    function spyOn(domElement)
    {
    var element = {};
    element['domElement'] = domElement;
    element['isInViewPort'] = true;
    elements[domElement.id] = element;
    }

    function handleScroll()
    {
    var currentViewPosition = document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop;

    for (var i in elements) {
    var element = elements[i];
    var elementPosition = getPositionOfElement(element.domElement);

    var usableViewPosition = currentViewPosition;
    if (element.isInViewPort == false)
    {
    usableViewPosition -= element.domElement.clientHeight;
    }

    if (usableViewPosition > elementPosition)
    {
    fireOutOfSightEvent(element.domElement);
    element.isInViewPort = false;
    }
    else if (element.isInViewPort == false)
    {
    fireBackInSightEvent(element.domElement);
    element.isInViewPort = true;
    }
    };
    }

    function fireOutOfSightEvent(domElement)
    {
    fireEvent('ScrollSpyOutOfSight', domElement);
    }

    function fireBackInSightEvent(domElement)
    {
    fireEvent('ScrollSpyBackInSight', domElement);
    }

    function fireEvent(eventName, domElement)
    {
    if (document.createEvent)
    {
    var event = document.createEvent('HTMLEvents');
    event.initEvent(eventName, true, true);
    event.data = domElement;
    document.dispatchEvent(event);
    }
    else if (document.createEventObject)
    {
    var event = document.createEventObject();
    event.data = domElement
    event.expando = eventName;
    document.fireEvent('onpropertychange', event);
    }
    }

    function getPositionOfElement(domElement)
    {
    var pos = 0;
    while (domElement != null)
    {
    pos += domElement.offsetTop;
    domElement = domElement.offsetParent;
    }
    return pos;
    }

    return {
    init: init,
    spyOn: spyOn
    };
    });