https://www.hologic.es/themes/custom/hologic/global/js/solutions-anchor-nav.js?tm4wcr

1/**
2 * @file
3 */
4
5(function($, Drupal, once) {
6  'use strict';
7
8  /**
9   * Solutions sticky on-page navigation component.
10   */
11  Drupal.behaviors.solutionsAnchorNav = {
12    attach: function (context) {
13      $(once('solutions-nav', '.solutions-sticky-on-page-nav', context)).each(function() {
14        const $wrapper = $(this);
15        const $toggle = $('.solutions-sticky-on-page-nav__toggle', $wrapper);
16        const $item = $('.solutions-sticky-on-page-nav__item', $wrapper);
17        const $anchorContainer = $('.component-anchor-container', context);
18        const firstAnchorContainerPos = $anchorContainer.first().offset().top;
19        const $header = $('#navbar');
20        const headerHeight = $header.outerHeight();
21
22        $item.first().addClass('active');
23        $item.each(function() {
24          const $currentItem = $(this);
25
26          $currentItem.on('click', () => {
27            $wrapper.removeClass('open');
28            const sectionId = $currentItem.attr('href').substring(1);
29            const $section = $(`[id='${sectionId}']`);
30
31            if ($section.length) {
32              $('html, body').animate({
33                scrollTop: $section.offset().top - 100
34              }, {
35                duration: 'slow',
36                complete: () => {
37                  $header.addClass('sticky--hide');
38                  $header.removeClass('sticky--show');
39                  $wrapper.addClass('fixed');
40                }
41              });
42            }
43          });
44        });
45
46        // Check scroll direction.
47        let prevScrollPosition = window.scrollY;
48        const isScrollDown = () => {
49          let scrollingDown = false;
50          let windowScrollPos = window.scrollY;
51
52          if (windowScrollPos > prevScrollPosition) {
53            scrollingDown = true;
54          }
55
56          prevScrollPosition = windowScrollPos;
57
58          return scrollingDown;
59        }
60
61        // Page scroll handler.
62        $(window).on('load scroll', function() {
63          if ($(window).scrollTop() > firstAnchorContainerPos - headerHeight) {
64            $header.addClass('sticky--hide');
65            $header.removeClass('sticky--show');
66            $wrapper.addClass('fixed');
67            $wrapper.removeClass('with-header');
68          }
69          else {
70            $header.addClass('sticky--show');
71            $header.removeClass('sticky--hide');
72            $wrapper.removeClass('fixed');
73          }
74
75          if (!isScrollDown()) {
76            $header.addClass('sticky--show');
77            $header.removeClass('sticky--hide');
78            $wrapper.addClass('with-header');
79          }
80          else {
81            $wrapper.addClass('fixed');
82            $wrapper.removeClass('with-header');
83          }
84        });
85
86        window.addEventListener("scrollend", () => {
87          $anchorContainer.each(function() {
88            const $anchor = $(this);
89            const anchorId = $anchor.attr('id');
90            const $activeItem = $(`.solutions-sticky-on-page-nav__item[href="#${anchorId}"]`);
91            const scrollPos = $anchor.offset().top - headerHeight;
92
93            if ($(window).scrollTop() > scrollPos) {
94              $item.removeClass('active');
95              $activeItem.addClass('active');
96              setTimeout(() => {
97                $toggle.text($activeItem.text());
98              }, 150);
99            }
100          });
101        });
102      });
103    }
104  };
105
106  /**
107   * Solutions floating navigation component.
108   */
109  Drupal.behaviors.solutionsFloatingNav = {
110    attach: function (context) {
111      $(once('solutions-floating-nav', '.solutions-floating-nav', context)).each(function() {
112        const $wrapper = $(this);
113        const wrapperPosition = $wrapper.data('position') || 500;
114        const $item = $('.solutions-floating-nav__item', $wrapper);
115        const $anchorContainer = $('.component-anchor-container', context);
116
117        $item.each(function() {
118          const $currentItem = $(this);
119
120          $currentItem.on('click', () => {
121            const sectionId = $currentItem.attr('href').substring(1);
122            const $section = $(`[id='${sectionId}']`);
123
124            if ($section.length) {
125              $('html, body').animate({
126                scrollTop: $section.offset().top - 100
127              }, {
128                duration: 'slow',
129              });
130            }
131          });
132        });
133
134        if ($(window).scrollTop() > wrapperPosition) {
135          $wrapper.addClass('fixed');
136        }
137
138        // Page scroll handler.
139        $(window).on('scroll', function() {
140          if ($(window).scrollTop() > wrapperPosition) {
141            $wrapper.addClass('fixed');
142          }
143          else {
144            $wrapper.removeClass('fixed');
145          }
146
147          $anchorContainer.each(function() {
148            const $anchor = $(this);
149            const anchorId = $anchor.attr('id');
150            const $activeItem = $(`.solutions-floating-nav__item[href="#${anchorId}"]`);
151            const scrollPos = $anchor.offset().top - 200;
152
153            if ($(window).scrollTop() > scrollPos) {
154              $item.removeClass('active');
155              $activeItem.addClass('active');
156            }
157          });
158        });
159      });
160    }
161  };
162
163})(jQuery, Drupal, once);