header lags behind when scrolling - html

Question

I tried to find something about this on the net, and although it's a minor issue, I feel as if it impacts the site experience. Furthermore, depending on the browser or speed of your computer, you may not notice this problem.
The issue is I have a fixed header on my site. When scrolling up or down, it seems to lag or drag behind... it stays fixed at the top, but while you scroll it jutters and drags at a different pace.
You can see for yourself, here.
It's doing my head in - it seems to only happen on the portfolio page, and not the home page.

Answer 1

I had same issue on Chrome. Solved it by adding
-webkit-backface-visibility: hidden;
to the header element in my stylesheet;
There is good article regarding this.
Hope this helps.

Answer 2

This may be happening because you're trying to do a fair bit on the window scroll event.
Every time a scroll event fires you've got a parallax scroll function that modifies elements with the parallax class (though there don't seem to be any actual elements with that class). You're also checking whether to add the class that changes your header background.
One thing you can do to improve performance is to do as little as possible inside the actual scroll function.
//Menu contrast happens when user scrolls down
// Save 4 jQuery select operations and 2 function calls per scroll event
var myNav = $('nav');
var heightDiff = $('#bg1').height() - myNav.height();
// Use global variables in the scroll function
$(window).scroll(function () {
if (window.pageYOffset < heightDiff)
{
myNav.removeClass('contrast');
}
else
{
myNav.addClass('contrast');
}
});
You can do something similar with the parallax loop as well.
// Save 2 jQuery select operations and one function call per scroll event
var htmlHeight = $('html').height();
var parallaxElems = $('.parallax');
$(window).scroll(function () {
var scrollpercentage = window.pageYOffset/htmlHeight;
var moveoffset = 350*scrollpercentage; // set parallax coeficcient
parallaxElems.css('background-position-y',(50-moveoffset)+'%');
});
Keep in mind that if you use JavaScript to add new elements to the DOM or modify existing elements, you may have to compute your global variables again.