Как спозиционировать подзаголовки?

Question

[Валерий Суворов]

Ребята, столкнулся с проблемой позиционирования подзаголовков при зафиксированой шапке (fixed).
Ссылка на скриншот: s42.radikal.ru/i096/1611/ba/d6655c248303.jpg

Оглавление имеет якоря на подзаголовки статьи.
При клике на любой якорь, заголовок становится не снизу шапки, а за ней (на нижнем слое).
Получается, что подзаголовок и часть текста перекрывается шапкой сайта.
Как спозиционировать подзаголовки так, чтобы при переходам по ссылкам из оглавления, подзаголовки стали ниже на высоту шапки?
Буду благодарен за помощь!

Answer 1

[tommy_13]

$('.nav a').click(function(e) {
		var anchor = $(this);
		$('html, body').stop().animate({
			scrollTop: $(anchor.attr('href')).offset().top - (высота шапки)
		}, 1000);
		e.preventDefault();
	});

Comments

[Валерий Суворов]

tommy_13, помогите пожалуйста, нужно модернизировать ещё один скрипт для внутренних страниц.
В прилагаемом коде 2 скрипта: ваш и мой.
Своему блоку я дал такое же имя блока, но отступ (85px) не срабатывает.
Код:
codepen.io/valerun/pen/bBrXOW

[tommy_13]

Валерий Путин: вместо click используй on

$(document).on('click', ''.nav a, function(e) {});

[Валерий Суворов]

tommy_13: Извините пожалуйста, но я не понимаю, что и куда вставить.

[Валерий Суворов]

tommy_13: Мне нужно второй скрипт доработать, чтобы он тоже отступал высоту шапки!

[tommy_13]

Валерий Путин: code codepen.io/anon/pen/vyeBam

[Валерий Суворов]

tommy_13: Спасибо, но не подошёл вариант, потому что блоки стали дублироваться на одной странице. Наверное, из-за того, что имеют одинаковое имя класса.
Пришлось сделать разные имена у блоков.
Указал разные имена в функции, но в блоке .main-list a функция не работает.
Проверьте пожалуйста, что сделал не так:
codepen.io/valerun/pen/mOBdJx

[Валерий Суворов]

tommy_13: Уточню, при клике по ссылкам из блока main-list, не происходит действие, то есть страница не прокручивается к нужному подзаголовку.

Answer 2

[Денис Инешин]

В данном вопросе вам поможет JS.

1. Перехватить клик по якорю
2. Измерить offsetTop у цели.
3. Вычесть высоту шапки из этого значения
4. Сделать scrollTop на новую позицию.

Comments

[Валерий Суворов]

Спасибо, не можете помочь с JS?

[Денис Инешин]

Валерий Путин: пробуйте написать сами, задавайте конкретные вопросы, иначе это уже задание, а не вопрос.

[Валерий Суворов]

Я бы написал, если б знал JS)
Без проблем, пусть будет заданием.
Как оформить задание?

[Денис Инешин]

Валерий Путин: тут никак) freelansim.ru