JQuery - delay function

Question

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

• Bhushan Kawadkar: you can call sticky header function after hiding header
• j00m: This sounds promising ^ any examples you can give me?

Answer 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); 
 });

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