我有一个网站，它的内容显示在两列中，一列是主要内容，另一列是侧边栏。侧边栏是而不是固定的，它只是与主要内容一起自然滚动。
然而，如果主要内容比侧边栏长，你最终会发现侧边栏中没有更多内容，但有更多内容可以阅读(整个页面都在滚动(。在这种情况下，我希望侧边栏变得粘稠，侧边栏的底部将粘在屏幕的底部。
这让我非常困惑的原因是，这种行为在倒置版本中是非常容易实现的，这意味着将侧边栏粘贴到顶部，只要有额外的主内容，侧边栏的顶部就会一直粘贴到屏幕的顶部，一旦你到达最后，它就会继续随内容自然滚动。就像它在这里的作用一样：https://jsfiddle.net/0dxLfzn8/1/
这种行为最初让我相信，从top: 0切换到bottom: 0会做我所描述的我想要的行为。但我在这里尝试过，但似乎根本没有任何作用：https://jsfiddle.net/0dxLfzn8/
HTML:
<div class="container">
<div class="content">
</div>
<div class="sidebar">
<div class="sidebar__inner">
</div>
</div>
</div>
CSS：
.container {
display: flex;
}
.content {
flex: 1;
}
.sidebar {
flex-basis: 200px;
}
.sidebar__inner {
position: sticky;
bottom: 0;
}
它似乎不想像粘在顶部一样粘在底部，我真的不明白它为什么不粘。从top的行为来看，这似乎就是bottom的作用。
我怎么能做到这一点(当然没有javascript(？
(很难找到解决方案，因为搜索结果中充满了粘性页脚问题(
因为您使用的是flex。你的侧边栏需要垂直对齐，在你的情况下是底部。
因此，您需要将align-self: flex-end;添加到侧边栏中。
点击此处了解position: sticky;的更多信息。关于position: sticky;的更多信息由于这里的flex而无法工作。
还要注意，当使用粘性时，您应该为webkit浏览器添加供应商前缀：position: -webkit-sticky;
.container {
display: flex;
}
.content {
flex: 1;
}
.sidebar {
flex-basis: 200px;
position: -webkit-sticky;
position: sticky;
bottom: 0;
align-self: flex-end;
}
.box {
margin-bottom: 1rem;
width: 100%;
height: 30vh;
background: grey;
}<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet suscipit assumenda, similique atque enim odio sequi, at magni non deserunt a! Nulla pariatur illum voluptate sequi ex optio blanditiis cupiditate vitae officiis id, aliquam dolorum fugiat
itaque excepturi laudantium ipsa accusamus minima suscipit eum quis vel praesentium commodi aut nostrum. Quam veritatis sit accusantium nisi, exercitationem in facere, cumque nobis, nihil at consectetur ex aperiam voluptatem consequuntur fugit laborum
ut debitis sunt illum amet reprehenderit iusto aliquid. Tempore quo aut, consequatur voluptatibus ea corporis hic beatae cumque dolorum eius non autem error ipsa, esse facere delectus tenetur cupiditate velit ad numquam! Fuga aut obcaecati natus!
Sit sint, sed blanditiis quia quis magni facere, minima perspiciatis quos illum voluptas provident necessitatibus vel fuga doloremque aut quidem ullam eaque eum libero! Quae, cupiditate animi laboriosam. Unde, ipsum, numquam. Expedita dignissimos
autem deleniti, aliquam atque quos, perferendis deserunt porro provident, molestiae possimus adipisci cum quasi. Autem vero voluptate, nam dolore repellendus culpa a quo voluptatum. A alias dolorem aut quam, tempora ratione rerum quae adipisci assumenda
accusamus sunt, molestias quos asperiores voluptas reiciendis nesciunt, maiores culpa! Quae inventore, voluptates esse vero beatae itaque sequi mollitia quisquam id. Alias, eveniet, nesciunt! Sequi id non animi eius voluptatibus accusamus sapiente
porro fugiat esse nam, assumenda eligendi sunt temporibus! Ducimus explicabo quas, magni temporibus sint sunt necessitatibus, iste aspernatur consequatur corrupti odio aliquam molestiae? Accusamus incidunt quia molestiae, reprehenderit neque nulla,
quibusdam ratione facilis facere officiis excepturi illum sequi non dicta iure! Nobis ea earum, ex ipsam eligendi corporis doloribus eaque nesciunt recusandae voluptas voluptatibus numquam totam quas quam animi facilis excepturi porro praesentium
suscipit labore incidunt quidem quae ad error dolorum. Dolor neque et vero minima tenetur, possimus quasi. Placeat quae, ratione tempora a quis provident odio qui ea nulla laudantium reiciendis numquam dignissimos consequatur laboriosam id eveniet
iure esse consectetur. A maiores quos quasi soluta quia ad consequatur ullam nisi. Inventore repellat nesciunt quia. Aut quae, quos molestiae magnam aliquam, libero, iste labore ut distinctio amet id quis eaque, animi sunt repellat laudantium eos
dolorum unde maxime sapiente! Cum sequi libero, praesentium! Provident alias eaque vitae quidem earum, minus reprehenderit inventore fugit, nesciunt repellendus est odit voluptas voluptate eveniet architecto iusto nulla aliquam explicabo. Qui eveniet
quam eligendi illo. Tempora a perferendis itaque eos suscipit officia laudantium minus nihil voluptate doloribus! Impedit distinctio reiciendis facilis maxime ea necessitatibus assumenda fugiat non commodi iure provident earum repellat doloribus,
similique labore, atque nemo harum enim quas nostrum unde. Aspernatur culpa eveniet accusamus, ratione, dolor animi non ipsa, dicta fuga magnam nesciunt ex? Laudantium quidem perferendis fugiat maiores! Fugit labore, atque cum mollitia asperiores
perferendis. Placeat mollitia, ipsam inventore consectetur explicabo sed necessitatibus dolorem, nesciunt porro sequi repellat consequuntur dicta sint est ab non expedita dolores aut quia nobis, saepe error, exercitationem rem deserunt. Voluptates,
porro. Tempore, quam odio, provident voluptates iste optio accusantium dignissimos, perferendis fugiat officia dolores est. Officia cum deserunt aut earum quos distinctio similique tempora corporis iusto odio, nulla debitis labore atque quasi quisquam
doloremque saepe iure inventore quia, quo porro a. Sequi dolore perspiciatis culpa ratione aspernatur laudantium nam animi rem perferendis nisi dolorem veritatis, assumenda non nemo nesciunt vel. Perspiciatis facilis, nulla. Ratione voluptates beatae,
incidunt enim ea quas recusandae, deleniti laborum assumenda, magni nihil dolore velit adipisci illo quam possimus aliquam dolores. Non excepturi, vel, rem consequatur modi totam dolorem alias unde autem obcaecati corporis quae ea error sed atque
facilis voluptatum deserunt at numquam velit quod molestiae, nesciunt voluptas. Nihil, non eius necessitatibus porro incidunt labore tempore amet, adipisci aliquam, provident iste. Autem dolorum numquam nihil necessitatibus et deleniti voluptate at
quos ea nesciunt, optio sint ducimus labore, quisquam cupiditate iste laborum odio hic corrupti expedita doloribus odit. Odit quidem repellat vero facere repudiandae veniam voluptatem inventore in reprehenderit. Debitis odio laudantium atque. Repudiandae
recusandae veniam culpa, laboriosam neque reiciendis illo perferendis reprehenderit quaerat alias molestiae nobis soluta repellat et delectus maxime tempora corporis dolore esse iste! Exercitationem facere officiis quo doloribus laudantium nostrum
accusamus, qui placeat! Rem voluptatum debitis quod repudiandae facilis, dignissimos quaerat impedit laborum iste officia sed itaque quisquam id architecto. Repellat voluptatem voluptates nam error sed sint velit alias cupiditate, distinctio corrupti
soluta molestiae expedita, nihil fuga, iusto officia laborum aliquam voluptatum nulla praesentium nisi incidunt eligendi pariatur magni. Aliquam provident iste tempora vel incidunt accusantium pariatur placeat, eius sint illo quos eaque nostrum ut
illum sapiente voluptatum nam, soluta expedita saepe id voluptates. Repellat dolorum repellendus iusto nesciunt tempore ut, a ad minima perferendis voluptas odio, quidem, ex doloribus pariatur saepe. Optio voluptates dolorum est excepturi corporis
molestias commodi, tempore labore ipsum voluptas consectetur exercitationem minima. Quos excepturi ipsum harum enim repellendus earum a veritatis nemo odio quam corrupti culpa impedit, qui molestiae dolore eum, aut quia consectetur consequuntur expedita
exercitationem aliquid labore numquam. Asperiores maiores ab suscipit quis dolor quaerat. Iure, ea! Provident labore, beatae nam blanditiis dolores est saepe, dolor consequatur ipsa eum amet voluptates earum excepturi dolorum officia. Accusantium
modi neque totam a culpa, ab non ipsa, ex repellat iure ea recusandae consequuntur temporibus obcaecati id, explicabo ipsam ratione, adipisci magni sit commodi nostrum? Excepturi officiis amet tempore deleniti error asperiores cumque dolor reprehenderit
aut, molestias, officia tempora incidunt ipsa temporibus. Eveniet necessitatibus eligendi eum vitae, sed qui labore ad, commodi dicta ea veritatis magnam iure asperiores veniam dolorem iste repellendus officiis corporis suscipit dolorum excepturi.
Placeat eligendi eaque eum quibusdam, maiores recusandae. Facilis non inventore, veniam dolores animi dolorum, nihil placeat ut modi quo ratione numquam. Repellat sint nemo quos dolorem, aut assumenda consequuntur at nulla, accusamus distinctio ea
molestias veniam quo labore vitae quibusdam culpa fugit. Obcaecati officia illo possimus expedita enim, voluptatum fuga molestias facere quis assumenda, illum molestiae nulla alias quod soluta quibusdam odit. Repellendus eius enim sequi praesentium
nesciunt odit placeat doloremque eaque eos inventore quia blanditiis voluptatibus nisi, autem laborum obcaecati quod accusantium, tempore, eum ipsam, corporis quae temporibus. Consequatur id, doloremque hic esse nulla aliquam cum eos, repudiandae
optio magnam, commodi laboriosam sed dolor nesciunt! Sit quasi fugit et ut reprehenderit enim cupiditate quisquam excepturi perspiciatis fuga aliquam cum, similique autem hic nulla vitae laudantium numquam distinctio praesentium iure illum totam magnam.
Ea aliquam eius laudantium deserunt mollitia autem error cum blanditiis. Officia voluptates incidunt, officiis sunt est neque nisi rem repellendus quaerat dolores alias error esse modi eum, tenetur consequatur itaque quam nam, cupiditate ipsam odit.
Aperiam nobis, consequuntur quis temporibus dolores unde aspernatur ratione architecto sed aliquid sit, rerum dolorem natus corrupti expedita, maiores quam dignissimos accusantium maxime qui? Corporis optio reiciendis ad iusto provident facilis quod
vitae dignissimos! Aspernatur deserunt accusamus quis iure, qui, culpa vitae at, ut inventore, illo eaque facere recusandae animi nesciunt? Hic, natus sunt id nulla ducimus. Deserunt odit dolores quasi labore eligendi voluptas impedit aspernatur rerum
porro exercitationem sint, dolorem earum! Ipsum animi voluptates amet nulla, provident voluptatibus earum eos ea quos dolore aperiam hic nihil repellendus, modi molestias, pariatur neque nemo odit corporis veritatis. Suscipit quo cupiditate amet minima
maiores, ipsa ratione porro magni consequuntur, sunt, inventore et laudantium aliquam magnam dolores mollitia corporis quasi. Dicta repudiandae, doloremque quo illum voluptatem in temporibus omnis dolorum quis explicabo quasi ad quod optio excepturi
aspernatur cupiditate et veniam iusto porro amet. Sunt cum id, tempore laborum consectetur atque culpa modi ipsum corporis maiores earum quia consequuntur eum unde quae rerum odio eaque est non repellat iure. Qui, ipsam, nisi? Ut amet dicta vitae
quo blanditiis reprehenderit, debitis voluptatem nostrum, animi sint ex veritatis magni nam autem impedit dolores repudiandae! Iusto soluta sapiente velit omnis mollitia, repellendus voluptatum ullam. Doloremque velit tempora porro sunt rerum. Culpa
saepe perspiciatis officia est nam cupiditate consequatur sunt, et? Ea sint, reiciendis ipsam assumenda veritatis distinctio ut quo aspernatur, voluptates eum perferendis deserunt, error, voluptate sunt voluptatum quaerat earum hic quasi quis. Eveniet
fuga aperiam dolores cumque nobis est quae ab ullam facere quidem nesciunt et earum vitae consequuntur, amet provident minus maiores. Voluptatem aperiam, quaerat temporibus. Tenetur soluta nostrum cumque culpa sit recusandae delectus iusto optio obcaecati
repellat sint repudiandae hic id incidunt vero laborum adipisci numquam animi consequatur dolorem itaque, mollitia consectetur quos est cupiditate? Nisi asperiores delectus at voluptas, repudiandae sunt repellat? Saepe veniam beatae, maxime voluptatum
fugiat minima rerum, autem reprehenderit est sequi blanditiis officiis nisi, voluptate pariatur cum ducimus qui, error? Odio nihil neque, libero ipsam et obcaecati minus necessitatibus sequi officia quia id deleniti, provident incidunt? Amet ad dolores,
esse labore impedit, nihil explicabo obcaecati eos vel eius rem sit quia cupiditate, ipsam in deleniti magnam quod earum velit non corporis repudiandae laudantium. Nulla cumque dolores earum? Eveniet rerum fuga, perspiciatis, reiciendis, molestiae
reprehenderit impedit ab quisquam sit deleniti quos animi aliquid adipisci, placeat at magni dignissimos quis? Repudiandae nesciunt fugiat exercitationem repellat architecto sequi corrupti, non aut, in qui minus laudantium eaque, unde magni voluptas
vel deserunt necessitatibus? Adipisci laudantium eligendi quisquam nobis eos voluptatum repellat. Ab, eum id assumenda provident asperiores unde est esse dolorum repellat aliquam doloremque voluptatibus amet sunt laborum iure tempore libero eaque
ratione vitae eos suscipit similique facilis! Voluptate dolore ipsum, magnam facere, ratione ipsa nesciunt dolores, totam debitis optio expedita. Officia adipisci totam quos reprehenderit, magni, qui nostrum, fugiat sunt est error eos tempora facere
reiciendis molestiae ex doloremque voluptatibus at perferendis. Maiores impedit commodi reprehenderit facere voluptas quae fuga nihil magnam. Deserunt vero dolor possimus harum aliquam fuga eius accusamus optio ad velit voluptate sunt corporis praesentium,
voluptates alias repudiandae? Aut ex quisquam atque sapiente laborum perferendis et, ad vero fugit corporis alias facilis hic, magnam debitis deserunt quis voluptatem soluta ducimus ipsa accusamus, numquam tempore error aliquam ut tempora. Distinctio
ipsam unde quasi illum laborum possimus odio harum similique nobis? Distinctio explicabo nisi saepe, animi assumenda eius vel enim libero. Perferendis sequi est eaque porro autem architecto in nulla quod eius ratione accusantium obcaecati, quibusdam
beatae vitae harum nihil, quae quidem soluta. Repellendus et dolor laboriosam, maiores totam magni cupiditate quo ipsum autem aperiam doloribus, fuga quod, odio dolorem. Odio sed quod obcaecati reprehenderit aliquam cum, distinctio voluptatibus alias!
Necessitatibus enim quam, placeat dicta? Nulla neque recusandae ipsam nostrum asperiores magni eius rerum voluptatem, quod, dolor reiciendis necessitatibus itaque officiis, fuga nam assumenda pariatur. Minima, enim. Molestiae quae asperiores culpa!
Dolores at, nam earum debitis vitae ipsa ratione officiis, magni neque pariatur ipsam, laborum tempore accusantium eius magnam natus? Natus possimus, numquam deleniti quibusdam quaerat minima sint nobis, minus tempore incidunt repellendus temporibus,
neque mollitia consequuntur. Totam veritatis architecto, rem asperiores culpa dolor assumenda! Incidunt minus nam sequi quas ut deleniti molestiae similique sint nulla dignissimos libero magnam, quaerat, odio dolore error iure exercitationem eos et
itaque. At velit quibusdam sequi distinctio expedita aperiam, asperiores accusamus laboriosam doloribus odio, culpa, ullam ab. Earum inventore repellat fugiat, distinctio est vero magni, quia hic. Repellendus eos sapiente, totam libero dolorem praesentium
voluptatum, placeat fugit blanditiis fugiat saepe asperiores sunt, ducimus nemo distinctio aut tempora odit vero nesciunt eaque aliquid adipisci! Voluptas, autem omnis sapiente harum quas in veniam. Fugiat cum vel nemo perspiciatis temporibus asperiores
adipisci! Nobis neque nemo vero suscipit iure, est consectetur eos odit! Obcaecati illum voluptatem facilis, quos fugiat quo est minus, hic, magni error consequuntur quibusdam! Dicta incidunt non odio rerum ducimus officiis animi voluptate, excepturi
id, pariatur illum repudiandae voluptatem at asperiores alias dolor facere. Enim natus expedita tenetur fugiat, aliquid, voluptatem beatae sed sint perspiciatis distinctio! Perspiciatis quibusdam fugit repellendus, facere nihil tempora minima repudiandae
ad ducimus ullam sit necessitatibus inventore sequi qui, totam unde quo. Quia beatae animi ea similique placeat unde corporis, amet odit iure magnam, modi quibusdam id totam fugit. Ipsa ad nisi quibusdam laboriosam adipisci beatae delectus deleniti
quod ratione porro minus sapiente, sint dicta mollitia. Doloribus quasi ipsam atque, quisquam, esse cumque praesentium, velit est repellendus explicabo aut suscipit harum repudiandae veniam, ratione odio quia necessitatibus dicta optio obcaecati dignissimos.
Velit perspiciatis praesentium similique explicabo officiis, totam labore. Quaerat facere, voluptatem ab quo sed voluptates. Est sunt ratione non iste consequatur impedit sint optio, provident inventore, deserunt hic, eum. Distinctio molestias dolores,
eligendi nam enim rem atque quasi harum amet, quaerat quis, nostrum praesentium voluptas quos aperiam explicabo quae eaque maxime alias! Laboriosam quo optio esse dicta quae, voluptatem architecto voluptas, numquam adipisci itaque labore placeat tempore
atque expedita blanditiis sunt dignissimos, maiores qui pariatur. Ipsum dignissimos nulla inventore alias blanditiis corrupti illum ea, est quidem tempora id molestias, facere accusamus cupiditate et dolorum aliquam doloribus magnam placeat quia asperiores!
Nobis architecto minima ullam tempore, ad, velit at id adipisci praesentium reprehenderit ut sunt consectetur sapiente quod enim expedita beatae neque autem modi natus? Culpa qui minus ipsam corporis officiis natus cumque repellat soluta deleniti
odit dolor numquam, nihil expedita veniam, voluptate dolorem velit quia voluptas aut hic. Officia omnis iure distinctio nostrum beatae magni quo minus quam voluptates corporis. Nobis impedit dolore consectetur necessitatibus delectus esse tempore
explicabo repellat modi at praesentium ut iusto, excepturi maxime ipsa blanditiis in obcaecati fugiat, voluptatibus, consequuntur quasi corporis suscipit. Laboriosam quibusdam beatae, repellat amet molestiae illo! Consequatur nostrum, ipsa enim. Blanditiis
quas pariatur odit doloremque perspiciatis nesciunt ullam, possimus eaque a enim nihil ipsa, laborum labore illum natus aut deserunt, unde. Sequi rerum quam architecto tempore quidem nihil dicta dolor, quia harum ratione voluptatibus id tempora dolorem
aliquam, accusamus consequatur, doloremque ut assumenda. Repellat, adipisci dolores quam molestias temporibus, voluptatem aliquam voluptas voluptates repellendus vero quaerat fugiat iste neque enim beatae pariatur quisquam, ea nisi alias. Doloremque
cum qui officia sunt perferendis quibusdam placeat recusandae dolore natus provident aspernatur rem, unde in quaerat repellendus labore iusto porro sit non iure, ab perspiciatis sapiente possimus reiciendis? Blanditiis natus dolor similique, asperiores
molestiae explicabo iure! Deserunt eaque error, amet quae reprehenderit soluta voluptas ratione distinctio sunt voluptatem temporibus repudiandae id rem corporis eum doloremque et, expedita qui quidem obcaecati ipsa commodi doloribus! Rerum accusantium
facilis molestiae mollitia fuga doloribus officia omnis provident nulla soluta dignissimos atque maiores quod sit alias quasi aut nisi odit dolore, est temporibus a labore earum vel excepturi! Quo consequuntur magni labore voluptatem quia facere,
nesciunt facilis laudantium deserunt accusantium velit numquam dolor placeat sunt modi, illum commodi! Ullam harum debitis maiores possimus odit delectus repellat sed nostrum aspernatur distinctio, modi provident ad perspiciatis ipsa, ratione, ipsam
rerum. Qui autem dicta sed, quod dolores mollitia doloremque molestias aliquam asperiores cupiditate, ab, nostrum velit est id officiis tempore! Quia architecto ullam quaerat magni, dolor minus. Neque consequatur rem amet dolorem nulla aliquid repudiandae,
aliquam! Tempora voluptatum hic facere, reprehenderit fuga, autem quod libero qui, quas nihil impedit dolore odit nobis aperiam. Ab at laudantium alias, ad architecto aut. Ut nostrum sequi debitis fugiat recusandae delectus saepe deleniti quidem dolorum
eos tempore animi nihil officiis earum quos ex, et similique explicabo consectetur, voluptates? Suscipit, doloribus consequatur sed! Non quasi, eum impedit harum dignissimos sed maiores ad temporibus at quas reprehenderit laudantium officia, repellendus
dolorem tempora fugiat mollitia, vel, quos natus ratione aliquid accusantium! Rerum et dicta quas labore, possimus odit voluptatum expedita, tempora modi adipisci aut.
</div>
<div class="sidebar">
<div class="sidebar__inner">
<div class="box">first box</div>
<div class="box">2nd box</div>
<div class="box"> 3rd box</div>
<div class="box">last box</div>
</div>
</div>
</div>