Фрагментация документа с фиксированной навигацией сверху. Как?

Question

[Дмитрий Ким]

Суть вопроса: есть страница с текстом и меню со ссылками на параграфы этого текста. Пример здесь: jsfiddle.net/zLeau0qz
Проблема в том, что сверху на странице располагается фиксированное навигационное меню. При нажатии по ссылкам на параграфы текста, заголовки этих параграфов закрываются навигационным меню. Есть ли простое решение на css + html ?

UPD: Может как-то можно прикрутить подобное, но более красиво?

h2:target {
    padding-top: 40px;
}

Answer 1

[Виталий Инчин ☢]

Очень сомневаюсь, что получится красивее...хоть margin, хоть padding.

Но я вам предложу другое:

• Делайте полоску меню еле видимой через opacity (при наведении - непрозрачной).
  
• Расположите после каждого подтекста (на последней строке) безразмерные элементы и делайте якоря на них.
  
• Используйте JavaScript:
  

  document.querySelector("aside").onclick = function(e){
    var tr = e.target.href;
    if(tr){
        e.preventDefault();
        window.scrollTo(
          0, 
          window.pageYOffset + document.querySelector("#"+tr.split("#")[1]).getBoundingClientRect().top - 60
         );
     }
  }

  
  
  Вот так: jsfiddle.net/zLeau0qz/2
  
  

Comments

[Дмитрий Ким]

Прозрачное меню - не вариант. Безразмерные элементы пробовал, они не подходят для первого параграфа. В общем, видимо, никак нельзя. Ваш ответ наиболее близок.

[Виталий Инчин ☢]

Дмитрий Ким: JS тоже не вариант?

[Дмитрий Ким]

Виталий Инчин ☢: хочется без него

Answer 2

[MhMadHamster]

jsfiddle.net/zLeau0qz/1

Comments

[Дмитрий Ким]

Находчиво и просто!!! ☺