Липкая панель навигации в какой-то момент теряется ⇐ CSS

[Anonymous]

Я пытаюсь создать панель навигации для своего веб-сайта, но как только я прокручиваю синий раздел, я обнаруживаю, что элемент перестает прилипать к верху и исчезает вместе с другими элементами. Как я могу решить эту проблему? Спасибо!

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

Elsa Frankel | Portfolio



My Name

[url=#home]Home[/url]
[url=#projects]Projects[/url]
[url=#resoucres]Resources[/url]
[url=#consulting]Consulting[/url]

icon
icon
icon

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

@import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');

* {
margin: 0;
padding: 0;
scroll-behavior: smooth;
}

body {
position: absolute;
top: 0; /* Header Height */
bottom: 0px;  /* Footer Height */
width: 100%;
height: 100%;
font-family: "Outfit", sans-serif;
}

nav {
background-color: #F8F8F8;
position: sticky;
height: 9%;
box-shadow: 0px 2px 10px #4d4d4d;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 2em;
top: 0;
z-index: 999;
}

#nav-buttons a{
margin: 0 0.7em;
}

h1 {
font-weight: 800;
font-size: 1.5em;
}

.body-page {
height: 100%;
width: 100%;
background-color: brown;
}

#home {
background-color: blue;
}

Я попробовал убрать панель навигации из основного раздела и изменить положение элементов основной страницы.

Подробнее здесь: https://stackoverflow.com/questions/785 ... at-a-point