6395
редагувань
Admin (обговорення | внесок) Немає опису редагування |
Admin (обговорення | внесок) Немає опису редагування |
||
| Рядок 42: | Рядок 42: | ||
// ============================================================ | // ============================================================ | ||
// 2. L-BOX NAVIGATION | // 2. L-BOX NAVIGATION | ||
// ============================================================ | // ============================================================ | ||
$(function () { | $(function () { | ||
| Рядок 49: | Рядок 48: | ||
var $items = $lbox.find('.l-box-item'); | var $items = $lbox.find('.l-box-item'); | ||
var HEADER_OFFSET = 78; | |||
var isAnimating = false; | |||
function | // Знаходить елемент-заголовок для якоря (міряємо ЗАВЖДИ в момент виклику) | ||
function getTargetEl(target) { | |||
if (target === 'top') return null; | |||
var el = document.getElementById(target); | |||
if (!el) return null; | |||
var $el = $(el); | |||
var $heading = $el.closest('h1, h2, h3, h4'); | |||
return $heading.length ? $heading[0] : el; | |||
} | |||
function getTargetTop(target) { | |||
if (target === 'top') return 0; | |||
var el = getTargetEl(target); | |||
if (!el) return null; | |||
// getBoundingClientRect + поточний скрол — актуально на момент виклику | |||
return el.getBoundingClientRect().top + window.pageYOffset - HEADER_OFFSET; | |||
} | |||
function scrollToTarget(target) { | |||
var top = getTargetTop(target); | |||
if (top === null) return; | |||
isAnimating = true; | |||
$('html, body').stop(true, false).animate({ scrollTop: Math.max(0, top) }, 280, function () { | |||
// Перевірка після анімації: якщо layout зсунувся — доводимо | |||
var corrected = getTargetTop(target); | |||
if (corrected !== null && Math.abs(corrected - window.pageYOffset) > 4) { | |||
$('html, body').stop(true, false).animate( | |||
{ scrollTop: Math.max(0, corrected) }, 120, | |||
function () { isAnimating = false; } | |||
); | |||
} else { | } else { | ||
isAnimating = false; | |||
} | } | ||
}); | }); | ||
} | } | ||
function updateActive( | function updateActive() { | ||
var scrollY = | if (isAnimating) return; // не перебиваємо підсвітку під час переходу | ||
var scrollY = window.pageYOffset + 120; | |||
var current = null; | var current = null; | ||
if ( | $items.each(function () { | ||
} | var target = $(this).data('target'); | ||
var top = (target === 'top') ? 0 : getTargetTop(target); | |||
if (top !== null && top - HEADER_OFFSET <= scrollY) current = $(this); | |||
}); | |||
$items.removeClass('active'); | $items.removeClass('active'); | ||
if (current) current.addClass('active'); | if (current) current.addClass('active'); | ||
| Рядок 85: | Рядок 108: | ||
$(this).addClass('active'); | $(this).addClass('active'); | ||
var $profileTab = $('.player-tab[data-tab="profile"], .player-tab[data-tab="info"]'); | var $profileTab = $('.player-tab[data-tab="profile"], .player-tab[data-tab="info"]'); | ||
var $gamesTab = $('.player-tab[data-tab="games"]'); | var $gamesTab = $('.player-tab[data-tab="games"]'); | ||
if ( | if ($gamesTab.length && $gamesTab.hasClass('active')) { | ||
$profileTab.trigger('click'); | $profileTab.trigger('click'); | ||
setTimeout(function () { scrollToTarget(target); }, 150); | |||
setTimeout( | |||
} else { | } else { | ||
scrollToTarget(target); | |||
} | } | ||
}); | }); | ||
| Рядок 125: | Рядок 123: | ||
if (!ticking) { | if (!ticking) { | ||
window.requestAnimationFrame(function () { | window.requestAnimationFrame(function () { | ||
updateActive( | updateActive(); | ||
ticking = false; | ticking = false; | ||
}); | }); | ||
| Рядок 132: | Рядок 130: | ||
}); | }); | ||
$(window).on('resize', | $(window).on('resize', updateActive); | ||
$(document).on('mcc:content-loaded', updateActive); | |||
updateActive | |||
} | // Перерахунок після довантаження картинок і шрифтів | ||
$(window).on('load', updateActive); | |||
if (document.fonts && document.fonts.ready) { | |||
document.fonts.ready.then(updateActive); | |||
} | |||
updateActive(); | |||
}); | }); | ||