The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Sticky Element – Quick jump

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #36050

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

    My jQuery code for this is pretty simple:

    var fixed = false;

    $(document).scroll(function() {
    if( $(this).scrollTop() >= 196 ) {
    if( !fixed ) {
    fixed = true;
    } else {
    if( fixed ) {
    fixed = false;

    $("#anchoredNav li").hover(
    function () {
    function () {

    Any help would be appreciated. Thanks :)


    FYI here is the fiddle in which i grabbed the code from:


    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
    $(“.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


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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.