HIde logo area on scroll

Hi, after digging through this great support forum I was able to find some custom css which lets me hide the logo area on scroll and the navigation sticks to the top.

http://littledigitalagency.com/Client/openfin/

However, my client does not like how the menu/menu bar “jumps” to the top. I explained this was because there was a specific point that the logo area disappears and at this point the navigation bar jumps to the top.

Question – is there anyway to make this transistion smoother? I have seen it in other themes but cannot figure out how to make it happen with Enfold. Rather than the logo area using “display: none” on scroll can it simply scroll smoothly out of the way leaving the navigation (menu / menu bar) stuck at the top?

Thanks