Точки привязки при прокрутке и прикрепленный заголовок, перекрывающий заголовок содержимого ⇐ CSS

[Anonymous]

У меня есть следующая структура:

< /p>
Итак, у меня есть заголовок... в верхней части страницы, этот заголовок прикреплен к меню точки привязки слева, и, кроме того, заголовок скрыт и отображается. при прокрутке, когда прокрутка вниз и она скрыта, а когда прокрутка поднимается вверх, она отображается. Я объясняю это, чтобы вы могли понять всю проблему.
Итак, в настоящее время происходит следующее: когда я нажимаю любую ссылку в левом меню, пытаясь подняться вверх, заголовок перекрывается. контент, в данном случае заголовки, которые содержат точку привязки внутри текста.
Смотрите пример здесь


В левом боковом меню была та же проблема, но я справляюсь чтобы частично исправить это, используя

Код: Выделить всё

.header[data-visible="true"]~main {
.container {
&__side-menu {
@include phone {
top: 100px;
}

ul {
@include tablet {
top: 230px;
}
}
}

}

}

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

Подробнее здесь: https://stackoverflow.com/questions/785 ... on-content