Задача. Есть блок с содержанием в статье. Оглавления в виде ссылок ссылаются на якоря в соответствующих заголовках, например ссылка <a href="#id-1">Заголовок 1</a> и заголовок <h2 id="id-1">Заголовок 1</h2>. Когда нажимаем на ссылку с заголовком, экран перемещается к заголовку с тегом h2 и якорем id=id-1. Экран установится так, что заголовок будет у самого верхнего края. Это не всегда хорошо выглядит. Например, если есть фиксированая, липкая шапка, то заголовок будет ею перекрываться. Поэтому лучше сделать чтобы был отступ от якоря при скролле к нему.
Смотреть пример якорных ссылок
Белки (англ. — «protein») — важная составляющая организма. Они входят в структуру большинства тканей, а так же в соединительную и костную. Белки (они же «протеины») участвуют во многих процессах организма, являясь ферментами. Телу необходимо постоянное пополнении протеинов, которые занимают место погибших клеток или поврежденных тканей. Также от них зависит рост и развитие организма. 10-35 % калорий дневного рациона должны поступать из белковой пищи.
Советы по употреблению белков
Потреблять дневную норму для организма.
Не злоупотреблять белком в течение длительного периода.
Не принимать пищу с высоким содержанием белка на ночь.
Сочетать протеины растительного и животного происхождения. Это улучшит их усвоение. Животные белки должны составлять 50% дневного рациона.
Для выведения продуктов белкового обмена необходимо намного больше воды, чем для расщепления и переработки остальных компонентов пищи. Для недопущения обезвоживания нужно выпивать 1,5-2 литра в день жидкости. Спортсменам рекомендуется 3 л воды для поддержания водно-солевого баланса.
Перед тренировкой для преодоления больших нагрузок рекомендуется принимать насыщенный белком протеиновый коктейль.
Яичный белок — эталон среди белков, т.к. он имеет наивысшую усвояемость. В состав желтка входят овомукоид, овомуцин, лизоцин, альбумин, овоглобулин, коальбумин, авидин, а белковой составляющей является альбумин. Не рекомендуется употреблять куриные яйца в сыром виде людям с нарушениями пищеварительного тракта, потому что плохо усваивается и выводится наружу. Скорость абсорбции — 9 г/ч. Показатели аминокислотного состава — высокие. Способствует снижению массы тела.
Решение 1. Можно использовать в CSS свойство scroll-margin-top — задает высоту отступа, которую нужно использовать при скролле к элементу. Работает во всех современных браузерах, кроме IE-11 и ранних версиях. Пример в Коде №1? используем псевдокласс :target (применяется к целевому элементу):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
Содержание: <ul> <li><a href="#id-1">Заголовок 1</a></li> <li><a href="#id-2">Заголовок 2</a></li> <li><a href="#id-3">Заголовок 3</a></li> </ul> <h2 id="id-1">Заголовок 1</h2> <p>Белки (англ. — «protein») — важная...</p> <h2 id="id-2">Заголовок 2</h2> <p>Советы по употреблению...</p> <h2 id="id-3">Заголовок 3</h2> <p>Яичный белок - ...</p> <style> :taget { scroll-margin-top: 2rem; } /* или h2 вместо :target */ </style> |
Решение 2. Другой вариант — использование для элемента с якорем положительный верхний внутренний отступ и отрицательный верхний внешний отступ, как в Коде №2:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> :taget { padding-top: 50px; margin-top: -50px; } /* или h2 вместо :target */ </style> |