|
@@ -2,79 +2,33 @@ jQuery(document).ready(function($) {
|
|
|
|
|
|
|
|
(function() {
|
|
(function() {
|
|
|
|
|
|
|
|
- return;
|
|
|
|
|
|
|
+ jqElemNavSentinel = $('#ch-ggs-web-suite-landing-nav-trigger');
|
|
|
|
|
+ jqElemNav = $('#ch-ggs-web-suite-landing-nav');
|
|
|
|
|
|
|
|
- const sections = [
|
|
|
|
|
- document.getElementById('ch-ggs-web-suite-section-01'),
|
|
|
|
|
- document.getElementById('ch-ggs-web-suite-section-02'),
|
|
|
|
|
- document.getElementById('ch-ggs-web-suite-section-03'),
|
|
|
|
|
- ];
|
|
|
|
|
|
|
+ if (jqElemNavSentinel.length === 0 || jqElemNav.length === 0) return;
|
|
|
|
|
|
|
|
- const navItems = {
|
|
|
|
|
- 'ch-ggs-web-suite-section-01': document.getElementById('ch-ggs-web-suite-nav-item-01'),
|
|
|
|
|
- 'ch-ggs-web-suite-section-02': document.getElementById('ch-ggs-web-suite-nav-item-02'),
|
|
|
|
|
- 'ch-ggs-web-suite-section-03': document.getElementById('ch-ggs-web-suite-nav-item-03'),
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- // intersection observer setup
|
|
|
|
|
-// const observerOptions = {
|
|
|
|
|
-// root: null,
|
|
|
|
|
-// rootMargin: '0px',
|
|
|
|
|
-// threshold: 0.7,
|
|
|
|
|
-// };
|
|
|
|
|
-
|
|
|
|
|
- const observerOptions = {
|
|
|
|
|
- root:null,
|
|
|
|
|
- rootMargin: '0px 0px -100% 0px',
|
|
|
|
|
- threshold: 0
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- function observerCallback(entries, observer) {
|
|
|
|
|
- entries.forEach((entry) => {
|
|
|
|
|
- console.log(
|
|
|
|
|
- entry.target,
|
|
|
|
|
- entry.isIntersecting,
|
|
|
|
|
- entry.intersectionRatio
|
|
|
|
|
- );
|
|
|
|
|
- if (entry.isIntersecting) {
|
|
|
|
|
- // get the nav item corresponding to the id of the section
|
|
|
|
|
- // that is currently in view
|
|
|
|
|
- const navItem = navItems[entry.target.id];
|
|
|
|
|
- // add 'active' class on the navItem
|
|
|
|
|
- navItem.classList.add('active');
|
|
|
|
|
- // remove 'active' class from any navItem that is not
|
|
|
|
|
- // same as 'navItem' defined above
|
|
|
|
|
- Object.values(navItems).forEach((item) => {
|
|
|
|
|
- if (item != navItem) {
|
|
|
|
|
- item.classList.remove('active');
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ const sentinelEl = jqElemNavSentinel[0];
|
|
|
|
|
+ const navEl = jqElemNav[0];
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ const stuckClass = 'stuck';
|
|
|
|
|
+
|
|
|
|
|
+ if ("IntersectionObserver" in window &&
|
|
|
|
|
+ "IntersectionObserverEntry" in window &&
|
|
|
|
|
+ "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
|
|
|
|
|
+
|
|
|
|
|
+ const handler = function(entries) {
|
|
|
|
|
+ if (navEl) {
|
|
|
|
|
+ if (!entries[0].isIntersecting) {
|
|
|
|
|
+ navEl.classList.add(stuckClass);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ navEl.classList.remove(stuckClass);
|
|
|
}
|
|
}
|
|
|
- });
|
|
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- const observer = new IntersectionObserver(observerCallback, observerOptions);
|
|
|
|
|
-
|
|
|
|
|
- sections.forEach((sec) => observer.observe(sec));
|
|
|
|
|
- })();
|
|
|
|
|
-
|
|
|
|
|
- (function() {
|
|
|
|
|
-
|
|
|
|
|
- const sentinelEl = document.getElementById('ch-ggs-web-suite-landing-nav-trigger');
|
|
|
|
|
- const headerEl = document.getElementById('ch-ggs-web-suite-landing-nav');
|
|
|
|
|
- const stuckClass = 'stuck';
|
|
|
|
|
-
|
|
|
|
|
- const handler = (entries) => {
|
|
|
|
|
- if (headerEl) {
|
|
|
|
|
- if (!entries[0].isIntersecting) {
|
|
|
|
|
- headerEl.classList.add(stuckClass);
|
|
|
|
|
- } else {
|
|
|
|
|
- headerEl.classList.remove(stuckClass);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ const observer = new window.IntersectionObserver(handler);
|
|
|
|
|
+ observer.observe(sentinelEl);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- const observer = new window.IntersectionObserver(handler);
|
|
|
|
|
- observer.observe(sentinelEl);
|
|
|
|
|
})();
|
|
})();
|
|
|
})
|
|
})
|