https://veitchlister.com/wp-content/themes/vlc-march-2020/js/scrollPosStyler.js

1/**
2 * @license
3 *  ========================================================================
4 * ScrollPos-Styler v0.7.0
5 * https://github.com/acch/scrollpos-styler
6 * ========================================================================
7 * Copyright 2015 Achim Christ
8 * Licensed under MIT (https://github.com/acch/scrollpos-styler/blob/master/LICENSE)
9 * ======================================================================== */
10
11// JSHint directives
12/* exported ScrollPosStyler */
13
14var ScrollPosStyler = (function(document, window) {
15  "use strict";
16
17  /* ====================
18   * private variables
19   * ==================== */
20  var scrollPosY = 0,
21      busy = false,
22
23      // toggle style / class when scrolling below this position (in px)
24      scrollOffsetY = 1,
25
26      // class used to apply scrollPosStyler to
27      spsClass = "sps",
28
29      // choose elements to apply style / class to
30      elements = document.getElementsByClassName(spsClass),
31
32      // style / class to apply to elements when above scroll position
33      classAbove = "sps--abv",
34
35      // style / class to apply to elements when below scroll position
36      classBelow = "sps--blw",
37
38      // tag to set custom scroll offset per element
39      offsetTag = "data-sps-offset";
40
41  /* ====================
42   * private funcion to check scroll position
43   * ==================== */
44  function onScroll() {
45    // ensure that events don't stack
46    if (!busy) {
47      // find elements to update
48      var elementsToUpdate = getElementsToUpdate();
49
50      if (elementsToUpdate.length > 0) {
51        // suspend accepting scroll events
52        busy = true;
53
54        // asynchronuously update elements
55        window.requestAnimationFrame(function() {
56          updateElements(elementsToUpdate);
57        });
58      }
59    }
60  }
61
62  /* ====================
63   * private funcion to find elements to update
64   * ==================== */
65  function getElementsToUpdate() {
66    // get current scroll position from window
67    scrollPosY = window.pageYOffset;
68
69    var elementsToUpdate = [];
70
71    // iterate over elements
72    // for (var elem of elements) {
73    for (var i = 0; elements[i]; ++i) { // chrome workaround
74      var element = elements[i];
75
76      // get offset from element, default to global option
77      var elScrollOffsetY = element.getAttribute(offsetTag) || scrollOffsetY;
78
79      // check current state of element
80      var elOnTop = element.classList.contains(classAbove);
81
82      // if we were above, and are now below scroll position...
83      if (elOnTop && scrollPosY > elScrollOffsetY) {
84        // remember element
85        elementsToUpdate.push({
86          element: element,
87          addClass: classBelow,
88          removeClass: classAbove
89        });
90
91      // if we were below, and are now above scroll position...
92      } else if (!elOnTop && scrollPosY <= elScrollOffsetY) {
93        // remember element
94        elementsToUpdate.push({
95          element: element,
96          addClass: classAbove,
97          removeClass: classBelow
98        });
99      }
100    }
101
102    return elementsToUpdate;
103  }
104
105  /* ====================
106   * private funcion to update elements
107   * ==================== */
108  function updateElements(elementsToUpdate) {
109    // iterate over elements
110    // for (var elem of elements) {
111    for (var i = 0; elementsToUpdate[i]; ++i) { // chrome workaround
112      var map = elementsToUpdate[i];
113
114      // add style / class to element
115      map.element.classList.add(map.addClass);
116      map.element.classList.remove(map.removeClass);
117    }
118
119    // resume accepting scroll events
120    busy = false;
121  }
122
123  /* ====================
124   * public function to initially style elements based on scroll position
125   *
126   * Options:
127   *    scrollOffsetY (number): Default scroll position in px to trigger the style. Default is 1.
128   *    spsClass (String): Classname used to determine which elements to style. Default is 'sps'.
129   *    classAbove (String): Classname added to the elements when the window is scrolled above the defined position. Default is 'sps--abv'.
130   *    classBelow (String): Classname added to the elements when the window is scrolled below the defined position. Default is 'sps--blw'.
131   *    offsetTag (String): HTML tag used on the element to specify a scrollOffsetY other than the default.
132   *
133   * ==================== */
134  var pub = {
135    init: function(options) {
136      // suspend accepting scroll events
137      busy = true;
138
139      // merge options object with global options
140      if (options) {
141        if (options.spsClass) {
142          spsClass = options.spsClass;
143          elements = document.getElementsByClassName(spsClass);
144        }
145        scrollOffsetY = options.scrollOffsetY || scrollOffsetY;
146        classAbove = options.classAbove || classAbove;
147        classBelow = options.classBelow || classBelow;
148        offsetTag = options.offsetTag || offsetTag;
149      }
150
151      // find elements to update

152      var elementsToUpdate = getElementsToUpdate();
153
154      if (elementsToUpdate.length > 0) {
155        // asynchronuously update elements
156        window.requestAnimationFrame(function() {
157          updateElements(elementsToUpdate);
158        });
159      } else {
160        // resume accepting scroll events
161        busy = false;
162      }
163    }
164  };
165
166
167  /* ====================
168   * main initialization
169   * ==================== */
170  // add initial style / class to elements when DOM is ready
171  document.addEventListener("DOMContentLoaded", function() {
172    // defer initialization to allow browser to restore scroll position
173    window.setTimeout(pub.init, 1);
174  });
175
176  // register for window scroll events
177  window.addEventListener("scroll", onScroll);
178
179  return pub;
180})(document, window);