1

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

 });
2
  • you can call sticky header function after hiding header Dec 4, 2020 at 10:58
  • This sounds promising ^ any examples you can give me?
    – j00m
    Dec 4, 2020 at 11:07

2 Answers 2

2

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

0
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.