10 examples of 'on scroll add class' in JavaScript

544
function _scrollCallback() {
545
546
        function toggleActiveClass(el) {
547
          if (_utils.isElementInViewport(el, 0.75)) {
548
            el.classList.add('active');
549
          } else {
550
            el.classList.remove('active');
551
          }
552
        }
553
554
        Array.prototype.forEach.call(elements, toggleActiveClass);
555
      }

23
function addScrollEvent( el ) {
24
	if ( !el ) return;
25
	elem = el;
26
	el.addEventListener( "scroll", applyClasses, false );
27
}

24
_addScroll() {
25
    if (this._getScrollTop() >= 50) {
26
        this.refs.navElement.classList.add('scroll');
27
    } else {
28
        this.refs.navElement.classList.remove('scroll');
29
    }
30
}

36
function on_scroll()
37
{
38
  let logo = document.getElementById("logo");
39
  
40
    if(window.scrollY > document.getElementById("header").offsetHeight - 120){
41
      if(!logo.classList.contains("sticky")) logo.classList.add("sticky");}
42
    else {
43
      if(logo.classList.contains("sticky")) logo.classList.remove("sticky");}
44
}

68
bindScroll() {
69
	this.scrollContainer = (window.mqq && window.mqq.iOS) ? document.querySelector(this.wrapper) : window;
70
	this.scrollContainer.addEventListener('scroll', this.scrollEvt);
71
}

55
addScrollEvents(type) {
56
57
  switch (type) {
58
    case "all":
59
      this.left.onscroll = this.handleEventLeftScroll.bind(this);
60
      this.main.onscroll = this.handleEventMainScroll.bind(this);
61
      this.right.onscroll = this.handleEventRightScroll.bind(this);
62
      this.right.onwheel = this.onWeel.bind(this);
63
      this.main.onwheel = this.onWeel.bind(this);
64
      this.left.onwheel = this.onWeel.bind(this);
65
      this.group.onwheel = this.onWeel.bind(this);
66
      this.vhandle.onscroll = this.handleEventVhandle.bind(this);
67
      this.hhandle.onscroll = this.handleEventHhandle.bind(this);
68
      break;
69
    case "left":
70
      this.main.onscroll = this.handleEventMainScroll.bind(this);
71
      this.right.onscroll = this.handleEventRightScroll.bind(this);
72
      this.vhandle.onscroll = this.handleEventVhandle.bind(this);
73
      break;
74
    case "main":
75
      this.left.onscroll = this.handleEventLeftScroll.bind(this);
76
      this.right.onscroll = this.handleEventRightScroll.bind(this);
77
      this.vhandle.onscroll = this.handleEventVhandle.bind(this);
78
      break;
79
    case "right":
80
      this.left.onscroll = this.handleEventLeftScroll.bind(this);
81
      this.main.onscroll = this.handleEventMainScroll.bind(this);
82
      this.vhandle.onscroll = this.handleEventVhandle.bind(this);
83
      break;
84
    case "Vhandle":
85
      this.left.onscroll = this.handleEventLeftScroll.bind(this);
86
      this.main.onscroll = this.handleEventMainScroll.bind(this);
87
      this.right.onscroll = this.handleEventRightScroll.bind(this);
88
      break;
89
    case "Hhandle":
90
      this.main.onscroll = this.handleEventMainScroll.bind(this);
91
      break;
92
    case "wheel":
93
      this.left.onscroll = this.handleEventLeftScroll.bind(this);
94
      this.main.onscroll = this.handleEventMainScroll.bind(this);
95
      this.right.onscroll = this.handleEventRightScroll.bind(this);
96
      this.vhandle.onscroll = this.handleEventVhandle.bind(this);
97
      break;
98
99
  }
100
}

175
bindIScrollEvents() {
176
    // Bind events on iScroll instance
177
    this.iScrollBindedEvents = {};
178
    this.updateIScrollEvents({}, this.props);
179
}

541
value: function addClassOnScrollInToView(elements) {
542
543
      /** Scroll event callback  */
544
      function _scrollCallback() {
545
546
        function toggleActiveClass(el) {
547
          if (_utils.isElementInViewport(el, 0.75)) {
548
            el.classList.add('active');
549
          } else {
550
            el.classList.remove('active');
551
          }
552
        }
553
554
        Array.prototype.forEach.call(elements, toggleActiveClass);
555
      }
556
557
      /** Throttle default scroll event and listen for optimizedScroll event */
558
      _utils.throttleEvent('scroll', 'optimizedScroll');
559
      _utils2.w.addEventListener('optimizedScroll', function () {
560
        _scrollCallback();
561
      });
562
    }

137
_onScroll(e) {
138
  if (this._updateOnScroll) {
139
    this.updateScrollbar();
140
  } else {
141
    this._updateScrollbarLocation();
142
  }
143
144
  if (this._autohide) {
145
    this._updateAutohide();
146
  }
147
}

333
registerScroll(): void {
334
  let self = this;
335
  this.baseEditor.on('scroll', function() {
336
    self.syncScroll(EventDirection.OUTGOING);
337
  });
338
  this.ownEditor.on('scroll', function() {
339
    self.syncScroll(EventDirection.INCOMING);
340
  });
341
}