kimono
@kimono
Web developer

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

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

UPD: Может как-то можно прикрутить подобное, но более красиво?
h2:target {
    padding-top: 40px;
}
  • Вопрос задан
  • 206 просмотров
Решения вопроса 2
In4in
@In4in
°•× JavaScript Developer ^_^ ו°
Очень сомневаюсь, что получится красивее...хоть 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

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
Добавить padding к элементам списка и давать ID им
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы