Не понимаю как работает position: sticky
Я хочу, чтобы header был прикреплён к верхнему краю браузера, но почему-то он скрывается при прокручивании на сколько-то пикселей, в чём дело?
Для header задано:
header {
position: sticky;
top: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*, ::before, ::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
body {
position: relative;
display: flex;
flex-direction: column;
font-family: 'Roboto', sans-serif;
}
.container {
width: 100%;
display: block;
max-width: 1000px;
margin: 0 auto;
padding: 0 15px;
}
header, footer, main {
font-size: 22px;
background-color: black;
color: white;
padding: 10px 0;
}
header, footer {
background-color: #3be5df;
color: black;
}
main {
padding: 40px 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
header {
position: sticky;
top: 0;
}<header>
<div class="container">
Header
</div>
</header>
<main>
<div class="container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat ducimus, quis optio iste quisquam dolore animi vitae similique ad maxime pariatur. Et enim eius porro ut maxime rerum suscipit ab sequi totam in doloremque, provident repudiandae natus accusamus maiores culpa, similique nesciunt perferendis odit minus? Nesciunt debitis eos iste, atque officia impedit facilis expedita sequi, neque totam autem. Eos repellat tenetur id earum molestias voluptatibus natus amet nihil non temporibus illum ad alias eum excepturi, fuga sint ullam rerum. Sed quidem velit ipsum eos esse ut nulla cumque temporibus optio voluptatem minus, sit consequuntur eaque, ratione iure. Eaque, quidem laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat ducimus, quis optio iste quisquam dolore animi vitae similique ad maxime pariatur. Et enim eius porro ut maxime rerum suscipit ab sequi totam in doloremque, provident repudiandae natus accusamus maiores culpa, similique nesciunt perferendis odit minus? Nesciunt debitis eos iste, atque officia impedit facilis expedita sequi, neque totam autem. Eos repellat tenetur id earum molestias voluptatibus natus amet nihil non temporibus illum ad alias eum excepturi, fuga sint ullam rerum. Sed quidem velit ipsum eos esse ut nulla cumque temporibus optio voluptatem minus, sit consequuntur eaque, ratione iure. Eaque, quidem laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat ducimus, quis optio iste quisquam dolore animi vitae similique ad maxime pariatur. Et enim eius porro ut maxime rerum suscipit ab sequi totam in doloremque, provident repudiandae natus accusamus maiores culpa, similique nesciunt perferendis odit minus? Nesciunt debitis eos iste, atque officia impedit facilis expedita sequi, neque totam autem. Eos repellat tenetur id earum molestias voluptatibus natus amet nihil non temporibus illum ad alias eum excepturi, fuga sint ullam rerum. Sed quidem velit ipsum eos esse ut nulla cumque temporibus optio voluptatem minus, sit consequuntur eaque, ratione iure. Eaque, quidem laboriosam?
</div>
</main>
<footer>
<div class="container">
Footer
</div>
</footer>Ответы (1 шт):
Автор решения: Михаил Камахин
→ Ссылка
Благодарю Deonis за ответ, нужно было не указывать height: 100% для body
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*, ::before, ::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
font-family: 'Roboto', sans-serif;
}
.container {
width: 100%;
display: block;
max-width: 1000px;
margin: 0 auto;
padding: 0 15px;
}
header, footer, main {
font-size: 22px;
background-color: black;
color: white;
padding: 10px 0;
}
header, footer {
background-color: #3be5df;
color: black;
}
main {
padding: 40px 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
header {
position: sticky;
top: 0;
}<header>
<div class="container">
Header
</div>
</header>
<main>
<div class="container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat ducimus, quis optio iste quisquam dolore animi vitae similique ad maxime pariatur. Et enim eius porro ut maxime rerum suscipit ab sequi totam in doloremque, provident repudiandae natus accusamus maiores culpa, similique nesciunt perferendis odit minus? Nesciunt debitis eos iste, atque officia impedit facilis expedita sequi, neque totam autem. Eos repellat tenetur id earum molestias voluptatibus natus amet nihil non temporibus illum ad alias eum excepturi, fuga sint ullam rerum. Sed quidem velit ipsum eos esse ut nulla cumque temporibus optio voluptatem minus, sit consequuntur eaque, ratione iure. Eaque, quidem laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat ducimus, quis optio iste quisquam dolore animi vitae similique ad maxime pariatur. Et enim eius porro ut maxime rerum suscipit ab sequi totam in doloremque, provident repudiandae natus accusamus maiores culpa, similique nesciunt perferendis odit minus? Nesciunt debitis eos iste, atque officia impedit facilis expedita sequi, neque totam autem. Eos repellat tenetur id earum molestias voluptatibus natus amet nihil non temporibus illum ad alias eum excepturi, fuga sint ullam rerum. Sed quidem velit ipsum eos esse ut nulla cumque temporibus optio voluptatem minus, sit consequuntur eaque, ratione iure. Eaque, quidem laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat ducimus, quis optio iste quisquam dolore animi vitae similique ad maxime pariatur. Et enim eius porro ut maxime rerum suscipit ab sequi totam in doloremque, provident repudiandae natus accusamus maiores culpa, similique nesciunt perferendis odit minus? Nesciunt debitis eos iste, atque officia impedit facilis expedita sequi, neque totam autem. Eos repellat tenetur id earum molestias voluptatibus natus amet nihil non temporibus illum ad alias eum excepturi, fuga sint ullam rerum. Sed quidem velit ipsum eos esse ut nulla cumque temporibus optio voluptatem minus, sit consequuntur eaque, ratione iure. Eaque, quidem laboriosam?
</div>
</main>
<footer>
<div class="container">
Footer
</div>
</footer>