title: Top of page gets stuck for a while when scrolling down
body: <p><strong>Latest Update</strong>: Could find the exact JS file dealing with the sticky header.Attached the same.</p>
  
  <p>I have recently started maintaining a website that already built using Drupal.</p>
  
  <p>When a user visits the homepage (<a href="https://scholars.umd.edu/" rel="nofollow noreferrer">https://scholars.umd.edu/</a>) and scrolls down slowly(the issue magically vanishes when we quickly scroll down), the red band at the top seems to get stuck for a while and it is only after scrolling more and more that a user is able to scroll down finally.Please go to the website and scroll down on the home page and you will understand the issue.</p>
  
  <p>I am attaching the relevant Javascript file where I think the issue might be present but I am newbie in JS so not really sure whats going on with the jQuery calls etc.</p>
  
  <p><strong>Update:</strong> <em>The issue only happens in Chrome and not in Firefox or IE. the chrome version I am using is Version 59.0.3071.115 (Official Build) (64-bit). Also, the issue happens when I use the mouse to scroll down or when i use the touchpad and scroll down slowly. If I click and drag the scroller on the right, the issue is not present.</em> 
  jQuery(document).ready(function ($) { 
   function stickymenu() {</p>
  
  <pre><code>var $this = this,
      $body = $("body"),
      header = $("#header"),
      headerContainer = header.parent(),
      menuAfterHeader = (typeof header.data('after-header') !== 'undefined'),
      headerHeight = header.height(),
      flatParentItems = $("#header.flat-menu ul.nav-main &gt; li &gt; a"),
      logoWrapper = header.find(".logo"),
      logo = header.find(".logo img"),
      logoWidth = logo.attr("width"),
      logoHeight = logo.attr("height"),
      logoPaddingTop = parseInt(logo.attr("data-sticky-padding") ? logo.attr("data-sticky-padding") : "28"),
      logoSmallWidth = parseInt(logo.attr("data-sticky-width") ? logo.attr("data-sticky-width") : "82"),
      logoSmallHeight = parseInt(logo.attr("data-sticky-height") ? logo.attr("data-sticky-height") : "40");
  
  if(menuAfterHeader) {
      headerContainer.css("min-height", header.height());
  }
  
  $(window).afterResize(function() {
      headerContainer.css("min-height", header.height());
  });
  
  $this.checkStickyMenu = function() {
  
      if(!menuAfterHeader) {
  
          if($(window).scrollTop() &gt; ((headerHeight - 15) - logoSmallHeight)) {
  
              $this.stickyMenuActivate();
  
          } else {
  
              $this.stickyMenuDeactivate();
  
          }
  
      } else {
  
          if($(window).scrollTop() &gt; header.parent().offset().top) {
  
              header.addClass("fixed");
  
          } else {
  
              header.removeClass("fixed");
  
          }
  
      }
  
  }
  
  $this.stickyMenuActivate = function() {
  
      if($body.hasClass("sticky-menu-active"))
          return false;
  
      logo.stop(true, true);
  
      $body.addClass("sticky-menu-active").css("padding-top", headerHeight);
      flatParentItems.addClass("sticky-menu-active");
  
      logoWrapper.addClass("logo-sticky-active");
  
      logo.animate({
          width: logoSmallWidth,
          height: logoSmallHeight,
          top: logoPaddingTop + "px"
      }, 200, function() {});
  
  }
  
  $this.stickyMenuDeactivate = function() {
  
      if($body.hasClass("sticky-menu-active")) {
  
          $body.removeClass("sticky-menu-active").css("padding-top", 0);
          flatParentItems.removeClass("sticky-menu-active");
  
          logoWrapper.removeClass("logo-sticky-active");
  
          logo.animate({
              width: logoWidth,
              height: logoHeight,
              top: "0px"
          }, 200);
  
      }
  
  }
  
  
  $(window).on("scroll", function() {
  
      $this.checkStickyMenu();
  
  });
  
  $this.checkStickyMenu();
  
  
  }
  
  stickymenu();
  </code></pre>
  
  <p>});</p>