Нужно динамически считать высоту хедера
$elem.css('transition');учитывая transition
затем вычитать от $elem.offset().top чтобы скролл был ровно к началу нужной секции
Вы,вероятно,не читали вопрос.
background: gray;filter: grayscale(100%);<img class="incomplete" src="..." />document.querySelectorAll("img").forEach(img => {
img.addEventListener("load", () => img.classList.remove("incomplete"));
}Например как на этом сайте.
(с react, vue, angular, знаком но как мне кажется это не для такого уровня проекта)Если вы считаете что это не для такого уровня проекта, то я бы в первую очередь учитывал свое мнение, так как главное что бы вам было удобно в последствии этот код поддерживать. Если бы вы скинули макет, было бы намного легче, но судя по тому что вы описали, мне кажется Bootstrap будет достаточно.