The problem with your code was, that it triggers the fades over and over again while scrolling and so they stack and fire one by one. My version works but could be a little bit optimized I guess.
$(function () {
var headertop = $("#aboutheader").offset().top;
var hoveractive = false;
var fadeout = true;
var fadein = true;
$(window).scroll(function () {
if ($(window).scrollTop() > headertop && fadeout) {
hoveractive = true;
fadeout = false;
fadein = true;
$("#navigationbar").fadeTo(1000, .35);
}
if ($(window).scrollTop() <= headertop && fadein) {
hoveractive = false;
fadein = false;
fadeout = true;
$("#navigationbar").fadeTo(1000, 1);
}
});
$("#navigationbar").hover(function () {
if (hoveractive) {
$("#navigationbar").fadeTo(500, 1);
}
}, function () {
if (hoveractive) {
$("#navigationbar").fadeTo(500, .35);
}
});
});