JQuery - delay function - html

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

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