Hey Guys,

Hoping someone can help me out with this little problem i am having. I have a nav on my site that once you scroll to a certain position (the top of that element) its positioning is changed to fixed so that it sticks to the top of the browser window.

My problem is that once it hits the scroll position (196px) it looks like it jumps about 20px down. I want the transition to be smooth. The problem can be seen here: (URL taken out for privacy now that issue is solved).

I have done it with the same script on another site and it is smooth (no jump): http://bikramyogaforesthill.com/new_students.php

My jQuery code for this is pretty simple:


var fixed = false;

$(document).scroll(function() {
if( $(this).scrollTop() >= 196 ) {
if( !fixed ) {
fixed = true;
$('#anchoredNav').css({position:'fixed',top:0});
}
} else {
if( fixed ) {
fixed = false;
$('#anchoredNav').css({position:'static'});
}
}
});

$("#anchoredNav ul.social li").hover(
function () {
$(this).children("ul").fadeIn('fast');
},
function () {
$(this).children("ul").fadeOut('fast');
}
);


Any help would be appreciated. Thanks :)