Sticky Element – Quick jump

[exsite_interactive]

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 :)

[exsite_interactive]

FYI here is the fiddle in which i grabbed the code from:
http://jsfiddle.net/octavioamu/yFCZq/

[sheepysheep60]

Hey man!

So, that element is pushing down the other elements beneath it. When it goes to fixed positioning instead of static, it suddenly gets a height of 0 so everything appears to jump upwards, filling the space it left behind. Could you add to your if statement a

$(“.container”).css(“padding-top”, “52px”); //when it goes fixed
and
$(“.container”).css(“padding-top”, “0”); //when it goes static

jQuery to fix the jump? Nice layout btw

Sorry if I’m wrong/ no help. Dave

[exsite_interactive]

YES. This works nicely. Thanks so much. Knew it had something to do with that but could not put a finger on it.

[Author]

Posts