Как исправить div в верхней части веб-страницы при ее прокрутке вниз? [дубликат] ⇐ CSS

[Anonymous]

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

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

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body {
width: 100%;
height: 100%;
}

::selection {
background: chocolate;
}

#profile-main {
background-color: #E5CBC3;
height: 1500px;
width: 100%;
display: flex;
align-items: center;
/* justify-content: center; */
flex-direction: column;
}

#navbar {
display: flex;
padding: 20px;
width: 80vw;
align-items: center;
/* height: 4px; */
/* background-color: red; */
justify-content: space-between;
}

#navbar #logo a {
text-decoration: none;
}

#navbar #logo a h3 {
font-family: 'Courier New', Courier, monospace;
font-size: 25px;
color: black;
transition: all ease 0.9s;
}

#navbar #logo a h3:hover {
text-decoration: underline;
/* line-height: 1.5rem; */
}

#navbar #text-nav h3 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
font-size: 20px;
}

#navbar #buttons button {
background-color: black;
color: white;
padding: 10px 25px;
border-radius: 4px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
border: none;
position: relative;
/* background-color: #04AA6D; */
/* border: none; */
/* font-size: 28px; */
color: #FFFFFF;
/* padding: 20px; */
/* width: 200px; */
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}

/*  animation  */

#navbar #buttons button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

#navbar #buttons button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

#navbar #buttons button:hover span {
padding-right: 25px;
}

#navbar #buttons button:hover span:after {
opacity: 1;
right: 0;
}

#progress-bar {
margin-top: 40px;
width: 80%;
background-color: rgb(104, 171, 230);
height: 200px;
}

#main-content {
display: flex;
background-color: rgb(252, 146, 146);
width: 80%;
height: 100%;
display: flex;
flex-direction: column;
}

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

Profile setup







[url=#]
Autumn.
[/url]

Setup your Profile

Sign up / Log in



bar

main content

Я пытался придать ему фиксированное положение методом проб и ошибок с помощью z-index и пробовал и другие вещи, например, с атрибутом позиции, но ничего не помогает!

Подробнее здесь: https://stackoverflow.com/questions/786 ... olled-down