Sticky nav jumping sometimes in webkit browsers

JavaScript
1

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.

2

Here’s mwhat’s causing the problem. The yOffset:


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.


$('.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')) {
3

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:


 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',
    });
  }
});