Use IntersectionObserver instead of scrolling event

src/js/wraps/abstract_page_manager/abstract_page_manager.js

@@ -27,13 +27,23 @@ define([
     initialize: function() {
       PageManagerController.prototype.initialize.apply(this, arguments);
       this.abstractTimer = new utils.TimingEvent('abstract-loaded', 'workflow');
+
+      // observe scrolling and apply sticky menu
+      this.observer = new IntersectionObserver(
+        () => {
+          this.adjustStickyElements();
+        },
+        { threshold: 0 }
+      );
+      this.observing = false;
+
+      // observe resizing and apply sticky menu
       _.bindAll(this, 'adjustStickyElements');
-      $(window).on('scroll resize', _.throttle(this.adjustStickyElements, 200));
+      $(window).on('resize', _.throttle(this.adjustStickyElements, 200));
     },
 
+    // Make menu bar and menus sticky
     adjustStickyElements: function() {
-      // Make menu bar and menus sticky
-
       // if single column and nav buttons container reached top of viewport, float nav button container and menu
       if (
         window.matchMedia('(max-width: 788px)').matches &&
@@ -136,6 +146,12 @@ define([
       $('.s-nav-container').removeClass('show');
       $('#resources-container').removeClass('show');
 
+      // Observe search bar
+      if (!this.observing && document.querySelector('.s-search-bar-widget')) {
+        this.observer.observe(document.querySelector('.s-search-bar-widget'));
+        this.observing = true;
+      }
+
       var ret = PageManagerController.prototype.show.apply(this, arguments);
       var href = this.getCurrentQuery().url();