Why is my fixed nav bar taking so long to scroll down?

Question

First and foremost, I realize that these questions are usually supposed to be accompanied by code and we are not supposed to just give the site and that's all... but I really do not even have a clue how to explain this one, let alone show an example with jsfiddle. So, please allow an exception and let me explain the issue:

On the site I posted below, I modified the header, adding the "blocks" (padding with colored background) around the menu options. One displays on the active page, and others display on hover. I think this messed with the way the fixed nav bar scrolls down because now if you begin to scroll ever so slowly (I recommend using the actual scroll bar rather than a mouse wheel), you will see that the background of the header area becomes smaller as if it is supposed to become a fixed header. However, the elements in the header (logo, nav menu options, etc.) stay the same size as if the bar is still at the very top of the page.

It isn't until you have scrolled a small distance down that finally the jquery (or whatever it is) kicks in and the elements become smaller to fit the height of the white header bar background.

I don't know what to modify here. I changed the CSS several times and I just cannot seem to figure it out. It may be in the jquery or whatever is causing the header to change sizes.. but I only know CSS and HTML.

Here is the site: http://greatman.us/

Here is a picture of the issue:

Answer 1

I changed this CSS

.et_fixed_nav #main-header {
  height: 42px;
}

to this

.et_fixed_nav #main-header.et-fixed-header {
  height: 42px;
}

so that the height restriction only applies when the JS has added the class, this seems to fix your issue