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