SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    May 2005
    Posts
    297
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sticky nav jumping sometimes in webkit browsers

    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:
    Code:
    	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.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by aaron118 View Post
    Any help would be greatly appreciated.
    Here's mwhat's causing the problem. The yOffset:

    Code:
    var yOffset = $("#local-nav-wrapper").offset().top;
    $(window).scroll(function() {
        if ($(window).scrollTop() > yOffset) {
    What is happening is that because the reload is loading so fast, the images hagen't been pulled through yet to the top offset is much higher than it should be.

    You can't have the yOffset be recalculated whenever the page scrolls though, because that's going to cause a CSS reflow to occur and will affect the display of the nav area.
    What needs to be done is for the yOffset to be calculated after an image in the flexslider has loaded, so that an appropriate top offset for the nav can be obtained. Once you get that value though, where do you put it?

    I suggest that you store the offset top of the nav as a data value of the nav section itself. That way you can calculate it when an image has loaded, and easily retrieve the value when the scroll event occurs.

    Code javascript:
    $('.flexslider img:first').load(function () {
        var nav = $("#local-nav-wrapper").data('offset', $("#local-nav-wrapper").offset().top);
    });
    $(window).scroll(function() {
        if ($(window).scrollTop() > $("#local-nav-wrapper").data('offset')) {
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by aaron118 View Post
    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/
    Hey Aaron118,

    I think what's happening here is that the script probably executes before the main carousel image has finished loading, and at that point the y offset of the nav is a lot higher than what it would otherwise be.

    I think I have a workaround for you here, I just used the Dev Tools to inject some code while debugging and it seems to work ok.

    Here's what I did:

    Code JavaScript:
     var yOffset; // declare yOffset like normal
    $(window).scroll(function() {
     
      // get the offset var if it is set or try to get it from the element.
      // this way the offset is retrieved the first time the page is scrolled
      yOffset = yOffset || $("#local-nav-wrapper").offset().top;
     
      // this could still be wrong if the user scrolls the page before 
      // the main image in the slider has loaded 
      // (one way to get around this would be to set a min-height for the slider)
      ///////////////////////////////////////////////////////////////////////////////////
     
      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',
        });
      }
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •