Solution 1 :

A solution is to use setTimeOut. In this example it will wait 3 seconds before executing your function.

jQuery(window).on('load scroll resize',function() { 
       setTimeout(function() { 
          // Position TOC on load, scroll and resize
          var isSticky = jQuery('.sticky'); // Check if sticky header is present
          if(isSticky.length && jQuery('#timelineFulltext').offset().top < jQuery(window).scrollTop()){
          var timelinePosition = isSticky.height() + 38;
        }
        else{
          var timelinePosition = jQuery('#timelineFulltext').offset().top -     jQuery(window).scrollTop();
        }
        jQuery('.fixed-timeline').css({'top': timelinePosition + 'px'});

          }, 
       3000); 
    });

Solution 2 :

you can create a function say hideStickyBar to apply header sticky bar script. Call this function as callback from hide function in jquery. See below sample code

$('#elementTohide').hide(400, hideStickyBar);

jQuery(window).on('load scroll resize', function (){
   hideStickyBar();
});

function hideStickyBar() {
    // Position TOC on load, scroll and resize
   var isSticky = jQuery('.sticky'); // Check if sticky header is present
   if(isSticky.length && jQuery('#timelineFulltext').offset().top < jQuery(window).scrollTop()){
    var timelinePosition = isSticky.height() + 38;
   }
   else{
      var timelinePosition = jQuery('#timelineFulltext').offset().top - jQuery(window).scrollTop();
   }
   jQuery('.fixed-timeline').css({'top': timelinePosition + 'px'});
}

Problem :

I have a function that positions a side nav to a fixed position depending on other elements (including a fixed header) on scroll/resize/load. The position top is calculated next to the content container (#timelineFulltext) OR below a header (.sticky).

The problem is the position is kicking in before the sticky header hides, which is another function.

Is there a way I can delay the execution of this function:

jQuery(window).on('load scroll resize', function (){
// Position TOC on load, scroll and resize
var isSticky = jQuery('.sticky'); // Check if sticky header is present
if(isSticky.length && jQuery('#timelineFulltext').offset().top < jQuery(window).scrollTop()){
    var timelinePosition = isSticky.height() + 38;
}
else{
    var timelinePosition = jQuery('#timelineFulltext').offset().top - jQuery(window).scrollTop();
}
    jQuery('.fixed-timeline').css({'top': timelinePosition + 'px'});

 });

Comments

Comment posted by Bhushan Kawadkar

you can call sticky header function after hiding header

Comment posted by j00m

This sounds promising ^ any examples you can give me?

By