我无法完成这项工作。我希望侧边栏粘在左侧，而我可以滚动主要内容部分。我正在使用 flexboxgrid。我无法使用 position:sticky，而且我无法以任何方式看到人们正在使用 flex 做这件事。
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
code,
em,
img,
small,
strike,
strong,
sub,
sup,
tt,
b,
u,
i,
ol,
ul,
li,
fieldset,
form,
label,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
main,
canvas,
embed,
footer,
header,
nav,
section,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
footer,
header,
nav,
section,
main {
display: block;
}
body {
line-height: 1;
overflow-x: hidden;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input {
-webkit-appearance: none;
border-radius: 0;
}
/* Breakepoints */
/* Uncomment and set these variables to customize the grid. */
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-right: 2rem;
padding-left: 2rem;
}
.col-padding {
padding-right: 1rem;
padding-left: 1rem;
}
.row {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: -1rem;
margin-left: -1rem;
}
.row.reverse {
flex-direction: row-reverse;
}
.col.reverse {
flex-direction: column-reverse;
}
.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
box-sizing: border-box;
flex: 0 0 auto;
}
.col-xs {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-xs-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-xs-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-xs-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-xs-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-xs-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-xs-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-xs-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-xs-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-xs-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-xs-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-xs-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-xs-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-xs-offset-1 {
margin-left: 8.333%;
}
.col-xs-offset-2 {
margin-left: 16.667%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-4 {
margin-left: 33.333%;
}
.col-xs-offset-5 {
margin-left: 41.667%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-7 {
margin-left: 58.333%;
}
.col-xs-offset-8 {
margin-left: 66.667%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-10 {
margin-left: 83.333%;
}
.col-xs-offset-11 {
margin-left: 91.667%;
}
.start-xs {
justify-content: flex-start;
text-align: start;
}
.center-xs {
justify-content: center;
text-align: center;
}
.end-xs {
justify-content: flex-end;
text-align: end;
}
.top-xs {
align-items: flex-start;
}
.middle-xs {
align-items: center;
}
.bottom-xs {
align-items: flex-end;
}
.around-xs {
justify-content: space-around;
}
.between-xs {
justify-content: space-between;
}
.first-xs {
order: -1;
}
.last-xs {
order: 1;
}
@media only screen and (768px) {
.container {
width: 720px;
}
.col-sm,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
box-sizing: border-box;
flex: 0 0 auto;
}
.col-sm {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-sm-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-sm-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-sm-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-sm-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-sm-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-sm-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-sm-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-sm-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-sm-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-sm-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-sm-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-sm-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-sm-offset-1 {
margin-left: 8.333%;
}
.col-sm-offset-2 {
margin-left: 16.667%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-4 {
margin-left: 33.333%;
}
.col-sm-offset-5 {
margin-left: 41.667%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-7 {
margin-left: 58.333%;
}
.col-sm-offset-8 {
margin-left: 66.667%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-10 {
margin-left: 83.333%;
}
.col-sm-offset-11 {
margin-left: 91.667%;
}
.start-sm {
justify-content: flex-start;
text-align: start;
}
.center-sm {
justify-content: center;
text-align: center;
}
.end-sm {
justify-content: flex-end;
text-align: end;
}
.top-sm {
align-items: flex-start;
}
.middle-sm {
align-items: center;
}
.bottom-sm {
align-items: flex-end;
}
.around-sm {
justify-content: space-around;
}
.between-sm {
justify-content: space-between;
}
.first-sm {
order: -1;
}
.last-sm {
order: 1;
}
}
@media only screen and (min-width: 992px) {
.container {
width: 960px;
}
.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
box-sizing: border-box;
flex: 0 0 auto;
}
.col-md {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-md-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-md-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-md-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-md-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-md-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-md-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-md-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-md-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-md-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-md-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-md-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-md-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-md-offset-1 {
margin-left: 8.333%;
}
.col-md-offset-2 {
margin-left: 16.667%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-4 {
margin-left: 33.333%;
}
.col-md-offset-5 {
margin-left: 41.667%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-7 {
margin-left: 58.333%;
}
.col-md-offset-8 {
margin-left: 66.667%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-10 {
margin-left: 83.333%;
}
.col-md-offset-11 {
margin-left: 91.667%;
}
.start-md {
justify-content: flex-start;
text-align: start;
}
.center-md {
justify-content: center;
text-align: center;
}
.end-md {
justify-content: flex-end;
text-align: end;
}
.top-md {
align-items: flex-start;
}
.middle-md {
align-items: center;
}
.bottom-md {
align-items: flex-end;
}
.around-md {
justify-content: space-around;
}
.between-md {
justify-content: space-between;
}
.first-md {
order: -1;
}
.last-md {
order: 1;
}
}
@media only screen and (min-width: 1200px) {
.container {
width: 1140px;
}
.col-lg,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
box-sizing: border-box;
flex: 0 0 auto;
}
.col-lg {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-lg-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-lg-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-lg-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-lg-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-lg-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-lg-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-lg-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-lg-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-lg-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-lg-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-lg-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-lg-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-lg-offset-1 {
margin-left: 8.333%;
}
.col-lg-offset-2 {
margin-left: 16.667%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-4 {
margin-left: 33.333%;
}
.col-lg-offset-5 {
margin-left: 41.667%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-7 {
margin-left: 58.333%;
}
.col-lg-offset-8 {
margin-left: 66.667%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-10 {
margin-left: 83.333%;
}
.col-lg-offset-11 {
margin-left: 91.667%;
}
.start-lg {
justify-content: flex-start;
text-align: start;
}
.center-lg {
justify-content: center;
text-align: center;
}
.end-lg {
justify-content: flex-end;
text-align: end;
}
.top-lg {
align-items: flex-start;
}
.middle-lg {
align-items: center;
}
.bottom-lg {
align-items: flex-end;
}
.around-lg {
justify-content: space-around;
}
.between-lg {
justify-content: space-between;
}
.first-lg {
order: -1;
}
.last-lg {
order: 1;
}
}
@media only screen and (min-width: 1960px) {
.container {
width: 1920px;
}
.col-xl,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12 {
box-sizing: border-box;
flex: 0 0 auto;
}
.col-xl {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-xl-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-xl-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-xl-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-xl-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-xl-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-xl-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-xl-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-xl-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-xl-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-xl-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-xl-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-xl-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-xl-offset-1 {
margin-left: 8.333%;
}
.col-xl-offset-2 {
margin-left: 16.667%;
}
.col-xl-offset-3 {
margin-left: 25%;
}
.col-xl-offset-4 {
margin-left: 33.333%;
}
.col-xl-offset-5 {
margin-left: 41.667%;
}
.col-xl-offset-6 {
margin-left: 50%;
}
.col-xl-offset-7 {
margin-left: 58.333%;
}
.col-xl-offset-8 {
margin-left: 66.667%;
}
.col-xl-offset-9 {
margin-left: 75%;
}
.col-xl-offset-10 {
margin-left: 83.333%;
}
.col-xl-offset-11 {
margin-left: 91.667%;
}
.start-xl {
justify-content: flex-start;
text-align: start;
}
.center-xl {
justify-content: center;
text-align: center;
}
.end-xl {
justify-content: flex-end;
text-align: end;
}
.top-xl {
align-items: flex-start;
}
.middle-xl {
align-items: center;
}
.bottom-xl {
align-items: flex-end;
}
.around-xl {
justify-content: space-around;
}
.between-xl {
justify-content: space-between;
}
.first-xl {
order: -1;
}
.last-xl {
order: 1;
}
}
html,
body {
font-family: 'Work Sans', sans-serif;
font-size: 100%;
color: #373737;
font-weight: 300;
line-height: 1.4;
}
b,
strong {
font-weight: 700;
}
p {
margin: 0rem;
margin-bottom: 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 900;
letter-spacing: 0rem;
margin: 0rem;
}
h1 {
font-size: 3.6rem;
line-height: 1.2;
}
h2 {
font-size: 2.6rem;
line-height: 1.25;
}
h3 {
font-size: 2.4rem;
line-height: 1.3;
}
h4 {
font-size: 2rem;
letter-spacing: -0.08rem;
line-height: 1.35;
}
h5 {
font-size: 1.6rem;
letter-spacing: -0.05rem;
line-height: 1.5;
}
h6 {
font-size: 1.4rem;
letter-spacing: 0;
line-height: 1.4;
}
a {
text-decoration: none;
font-size: 1rem;
font-weight: 400;
}
u {
text-decoration: underline;
}
ul {
list-style-type: none;
}
.height-100 {
height: 100%;
}
html,
body {
height: 100%;
background-color: #fff;
}
#___gatsby {
height: 100%;
}
#gatsby-focus-wrapper {
height: 100%;
}
.fixed {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
}
aside {
padding: 0;
display: block;
top: 0;
height: 100%;
}
main {
padding-left: 2rem;
padding-right: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
a {
color: white;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 4px;
transition: background-size cubic-bezier(0, 0.5, 0, 1) 0.3s;
}
a:hover,
a:focus {
text-decoration: none;
background-size: 100% 4px;
}
nav {
height: 100%;
display: flex;
background: #1792B9;
color: #fff;
width: 100%;
padding: 2rem;
position: relative;
align-items: flex-end;
justify-content: left;
}<html>
<body>
<div id="___gatsby">
<div tabindex="-1" id="gatsby-focus-wrapper" style="outline: none;">
<div class="row height-100">
<aside class="col-xs-4 col-lg-4 col-xl-3">
<nav>
<div class="box">
<h1>Test</h1>
<p>Lorem</p>
<ul>
<li><a href="">About</a></li>
</ul>
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</div>
</nav>
</aside>
<main id="homepage" class="col-xs-8 col-lg-8 col-xl-6">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non quam augue. Aliquam sed mauris id lacus fermentum gravida sit amet at mauris. Nullam auctor consectetur rhoncus. Quisque tincidunt nisl a ultrices consectetur. Aenean vel lectus
sit amet enim tempor vestibulum. Sed id lacus feugiat, commodo eros aliquet, hendrerit nibh. Aliquam ullamcorper magna vitae sagittis hendrerit. Cras lacinia cursus ipsum, ac condimentum ex molestie eget.</p>
<p>Vestibulum mollis ipsum sed elit laoreet, ut pellentesque nibh sodales. Nam pellentesque est ut magna suscipit ornare non eu dolor. Suspendisse id nisl eros. Ut lorem lectus, finibus at sodales id, convallis sed velit. Sed feugiat eu elit
eu porttitor. Donec elementum, nibh at malesuada bibendum, tellus nibh congue est, et congue eros elit at sem. Morbi hendrerit augue nec commodo mollis. Cras nisl dolor, vulputate ut aliquam a, euismod vel lorem. Vivamus interdum sapien
ut sapien elementum, ut facilisis velit vulputate. Maecenas vel nisl odio.</p>
<p>Etiam rutrum at dui quis porta. Proin blandit et velit consectetur vulputate. Pellentesque fringilla varius cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque euismod consectetur malesuada.
In hac habitasse platea dictumst. Phasellus pharetra tortor eget nibh condimentum, ut gravida sem vulputate. Praesent placerat urna ut viverra viverra. Morbi dolor tortor, tristique fermentum magna a, blandit aliquet mauris. Aliquam hendrerit
ipsum porttitor magna ultricies, sit amet accumsan felis aliquam. Aenean vel quam imperdiet erat fringilla euismod. Cras vitae turpis pulvinar nisl condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Pellentesque ut ultricies libero. Suspendisse varius ligula at ex tempor porta.</p>
<p>Mauris at lacus nec ligula rutrum venenatis. Duis magna enim, mollis eget odio eu, luctus tempor augue. Quisque laoreet ante vel ipsum scelerisque, a placerat dolor sagittis. Pellentesque mollis mi quis metus pretium, sed elementum erat ultrices.
Ut commodo tempus massa a interdum. Maecenas non massa sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ante lacus, laoreet vel sapien a, luctus convallis lectus. Suspendisse nec tortor sit amet eros pretium semper a
at turpis. Praesent at facilisis ante. Pellentesque condimentum laoreet lacus, sed hendrerit sapien auctor eu. Sed ac volutpat risus. Nunc sodales dolor et aliquam sollicitudin. Maecenas efficitur, urna a condimentum volutpat, ligula erat
sollicitudin nisl, sit amet rhoncus nisi tortor nec neque. Mauris commodo leo sed justo consectetur, pretium rutrum nisi fermentum.</p>
<p>Nulla sem neque, varius sed eleifend nec, volutpat eu elit. Vivamus ornare a diam a porta. Vestibulum gravida commodo vestibulum. Nunc ultrices quam sed nunc facilisis sagittis. Quisque placerat suscipit odio id congue. Quisque blandit vitae
orci eget varius. Etiam scelerisque tincidunt sapien quis auctor. Donec enim lectus, semper ut libero ultricies, fermentum ultricies orci. Sed congue tincidunt leo nec pretium. Etiam dignissim feugiat pellentesque. Aenean vitae mauris libero.
Mauris erat eros, vehicula eget maximus nec, sagittis non nibh. Nunc pharetra massa nec massa blandit blandit.</p>
<p>Maecenas bibendum turpis tellus, vitae tempus mi feugiat vel. Praesent tristique mi ac venenatis bibendum. Donec congue, sem at interdum fringilla, risus quam molestie nibh, hendrerit tempus risus enim at velit. Integer consectetur nisi id
consequat faucibus. Morbi est lacus, eleifend non vulputate nec, egestas sit amet arcu. Proin aliquam, arcu interdum vehicula suscipit, lacus lacus elementum tortor, sed rutrum enim dui vestibulum libero. Fusce tempor diam sed interdum iaculis.
Quisque vestibulum metus ac magna maximus lacinia. Proin ut tincidunt magna, sed molestie elit. Praesent eu interdum justo. Maecenas vel mauris odio.</p>
<p>Curabitur egestas hendrerit turpis vel lobortis. Nam sit amet porttitor urna, sed mattis leo. Duis a justo suscipit, aliquam urna ut, iaculis nibh. Morbi tincidunt, sem eget luctus condimentum, tellus justo tincidunt odio, sit amet pretium
metus odio id odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed elementum purus id lacus mattis sodales. Fusce id scelerisque nibh, nec mattis dui. Cras tristique, urna sit amet semper
tempor, libero tellus pretium diam, sit amet dignissim massa turpis ut erat. Nunc congue urna felis. Duis quis mattis mauris.</p>
<p>Cras rutrum tellus ante. Pellentesque tincidunt, enim efficitur pharetra porta, mauris justo dignissim erat, in lacinia dolor risus sed quam. Aliquam laoreet maximus dolor, a tincidunt lorem. Praesent vel facilisis odio, sit amet convallis
urna. Nullam vehicula tincidunt nunc, commodo lobortis ligula euismod eget. Praesent fringilla libero at nulla bibendum, id posuere ligula iaculis. Nulla ultrices ultricies felis, et eleifend diam elementum sed. Suspendisse tortor velit,
mollis sit amet sapien ac, porta tincidunt dui. Aliquam felis odio, lobortis pulvinar lacus ac, vulputate malesuada dolor. Proin eleifend risus sit amet augue blandit sollicitudin. Nam vitae finibus sem, id ornare sapien. Aliquam posuere
libero dolor, sed efficitur elit fermentum vitae. Nullam pretium mi at sem fringilla aliquet. Nullam aliquet eget purus eu sodales.</p>
<p>Vestibulum varius mauris eu turpis pharetra pulvinar. Etiam placerat ut risus a imperdiet. Aenean elementum velit vel dui viverra, eu tempor lectus rutrum. Ut dapibus felis in odio aliquet viverra. Nullam euismod id ex ut commodo. Phasellus
iaculis cursus nibh sit amet finibus. Integer viverra est non lacus finibus, non euismod enim accumsan. Phasellus lacinia, eros eu suscipit placerat, eros risus varius sem, ut condimentum urna velit in purus. Donec dictum turpis nec lacinia
malesuada. Nam placerat dapibus tincidunt. Sed sed laoreet justo. Quisque laoreet quis ex quis rhoncus. Duis sed consequat neque. Integer viverra vel est ut mollis. Curabitur id fringilla odio.</p>
<p>Morbi porta eu arcu in blandit. Nam metus nulla, sollicitudin a lacinia in, viverra non ipsum. Ut egestas metus ac risus vestibulum scelerisque. Quisque nec felis at nisl mollis mollis. Aliquam convallis interdum tempor. Curabitur at tortor
metus. Aliquam et consequat neque, euismod vulputate erat. Donec orci nibh, faucibus ultrices lacinia a, laoreet vel nisi. Nam at neque velit. Maecenas ultrices elementum orci eu commodo. Sed maximus magna posuere odio ornare tincidunt.
Pellentesque ultrices et magna id pretium. Vestibulum vulputate ex nec risus efficitur, vitae iaculis justo eleifend. Duis metus sapien, imperdiet a neque vitae, pretium dictum nunc.</p>
</div>
</main>
</div>
</div>
<div id="gatsby-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0px; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"></div>
</div>
</body>
</html>有人知道如何解决这个问题吗？
答案 0 :(得分：0)
尝试添加到您需要粘性的父元素：
position: -webkit-sticky; position: sticky; top:0; align-self: flex-start;