Проблема прокрутки страницы JQuery с фиксированным заголовком

Question

Я использую строку JQuery, чтобы направлять своих пользователей в правую часть моей страницы при переходе по ссылке, используя следующий код:

$('html, body').animate({ scrollTop: $("#cell_" + scrollTo).offset().top }, 1500);

Работает нормально и прокручивается до нужной точки на странице. Однако у меня есть фиксированная навигационная панель (высота: 49 пикселей; позиция: фиксированная;) на сайте, который просвечивает вверху страницы при прокрутке. Проблема возникает, когда страница прокручивается до нужного содержимого, но затем продолжает прокручиваться под панелью навигации, скрывая ее от поля зрения.

У меня вопрос, как я могу изменить вышеуказанный код для компенсации навигационной панели?

Любая помощь с благодарностью,

Линдон

Answer 1

Вам нужно будет получить externalHeight заголовка и вычесть его из суммы, на которую вы прокручиваете.

var scrollToPosition = parseInt($("#cell_" + scrollTo).offset().top) - parseInt($('#header').outerHeight());

if (scrollToPosition < 0) { scrollToPosition = 0 } // make sure it is not negative

$('html, body').animate({ scrollTop: scrollToPosition }, 1500);