Grow your CSS skills. Land your dream job.

Sticky nav jumping sometimes in webkit browsers

  • # October 17, 2012 at 3:36 am

    I have a strange problem which I cannot get my head around, I have created a sticky nav via jquery which works fine in all browsers but Chrome and Safari, sometimes it works and sometimes it doesn’t if you refresh the page. Most of the time the menu jumps to the top of the page as soon as you start browsing. You can view the problem here: http://debourg-dev.ch/syselcloud/syselbackup/

    The jQuery concerned is:

    var yOffset = $(“#local-nav-wrapper”).offset().top;
    $(window).scroll(function() {
    if ($(window).scrollTop() > yOffset) {
    $(“#local-nav-wrapper”).css({
    ‘top': ‘0’,
    ‘bottom': ‘auto’,
    ‘position': ‘fixed’,
    });
    } else {
    $(“#local-nav-wrapper”).css({
    ‘top': ‘auto’,
    ‘bottom': ‘0’,
    ‘position': ‘absolute’,
    });
    }
    });

    Any help would be greatly appreciated.

    # October 17, 2012 at 3:46 am

    I see the problem is that yOffset is not always getting the correct value, not sure why this happens. Try changing this
    var yOffset = $(“#local-nav-wrapper”).offset().top;

    into this
    var yOffset = $(“#local-nav-wrapper”).position().top;

    # October 17, 2012 at 3:53 am

    or
    var yOffset = 444;

    this isn’t that flexible, but I see you have a fixed height there

    # October 17, 2012 at 4:27 am

    var yOffset = $(“#local-nav-wrapper”).position().top; seems to make it a bit more reliable in webkit, but the menu still jumps a bit before it’s supposed to. I can’t give a set offset like 444 as the layout is responsive.

    Thanks

    # October 17, 2012 at 4:32 am

    In fact it still causes the original problem when I upload it to the server, it appears to be more reliable on localhost. I can’t get my head around this. Everything is the same between localhost and my server?

    # October 17, 2012 at 4:37 am

    sounds like a timing problem. When it loads in localhost it’s really fast anad it gets the correct value, but on the server it gets the value before the elements are set.
    you could move the function from $(document).ready to $(window).load but that would make a strange jumping effect on the menu if a user starts scrolling immediately after the page shows up. Anyway I think it’s worth giving it a try

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".