Блог

Главная - Вопросы по программированию - jQuery — функция задержки

jQuery — функция задержки

#html #jquery

#HTML #jquery

Вопрос:

У меня есть функция, которая позиционирует боковой навигатор в фиксированное положение в зависимости от других элементов (включая фиксированный заголовок) при прокрутке / изменении размера / загрузке. Позиция top вычисляется рядом с контейнером содержимого (#timelineFulltext) ИЛИ под заголовком (.sticky).

Проблема в том, что позиция запускается до того, как скрывается липкий заголовок, что является еще одной функцией.

Есть ли способ, которым я могу отложить выполнение этой функции:

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

 });

Комментарии:

1. вы можете вызвать функцию sticky header после скрытия заголовка

2. Это звучит многообещающе ^ какие-либо примеры, которые вы можете мне привести?

Ответ №1:

Решение заключается в использовании setTimeOut . В этом примере он будет ждать 3 секунды перед выполнением вашей функции.

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

Ответ №2:

вы можете создать функцию, скажем hideStickyBar , для применения сценария залипания заголовка. Вызовите эту функцию как обратный вызов из hide функции в jquery. Смотрите ниже пример кода

 $('#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 amp;amp; 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'});
}
Метки: