我刚刚在FF32和Safari 7中玩过position: sticky。它与top: 0px或left: 0px（水平粘贴）完美地工作，但是当我尝试bottom: 0px甚至更好时它似乎不起作用，结合bottom: 0; left: 0它没有将自己设置到元素的底部。这种行为可以在这里尝试：http://html5-demos.appspot.com/static/css/sticky.html，只需将top: 10px attribut改为bottom: 0。这不应该工作吗？
我认为将一些东西粘在底部是一个有效的用例，就像人们想要贴在顶部的东西一样。在我们的例子中，因为我感兴趣的是在水平滚动上有粘性，但我希望这个元素位于父元素的底部。
无论如何，欢迎任何建议和额外信息。
position: sticky;
bottom: 30px;
确实有效。请记住，sticky元素与其父元素相关。
http://codepen.io/corysimmons/pen/QyBMXN?editors=1100（在Firefox中）
在这种情况下，<section>（蓝色区域）是父母。
虽然https://github.com/wilddeer/stickyfill#what-it-doesnt它不适用于Stickyfill
我建议你再玩一会儿，直到你掌握它为止。
让我知道你是否需要一个JS插件，其行为类似于position: sticky，而不必使用position: sticky（不能等待浏览器支持或更强大的polyfill）。
用position: sticky思考元素的方法如下：
“具有position: sticky的项目应始终保持在其父级内的正常位置，UNLESS表示正常位置在视口之外，在这种情况下，粘性项目应相对于视口固定。如果父容器也离开，则所有投注都将关闭视口，在这种情况下，粘性项目随之滚动“。
This Codepen说得很好。注意只要父蓝框在普通视图中，红色框如何保持在正常位置。但是，当您滚动以使红色框开始离开视口时，它将被修复。最后，当蓝色父项完全滚出视图时，红色框也会消失。
* {
box-sizing: border-box;
}
body {
height: 3000px;
padding: 3rem;
}
section {
background: dodgerblue;
color: white;
line-height: 1.5;
padding: 30px;
}
div {
display: block;
width: 100px;
height: 100px;
background: tomato;
position: sticky;
bottom: 30px;
}<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt. Numquam voluptate, velit quisquam ipsa molestias laudantium odit reiciendis nisi corporis voluptatibus, voluptatum sunt natus, accusantium magnam consequatur fugit officiis minima voluptatem consequuntur nam, earum necessitatibus! Cupiditate ullam repellendus, eius iure voluptas at commodi consectetur, quia, adipisci possimus, ex mollitia. Labore harum error consectetur officiis aut optio, temporibus iste nobis ducimus cumque laudantium rem pariatur. Ut repudiandae id, consequuntur quasi quis pariatur autem corporis perferendis facilis eius similique voluptatibus iusto deleniti odio officia numquam tenetur excepturi, aspernatur sunt minima aut fugiat ipsam. Ea nesciunt, amet fugit facere similique dolor nam tempora perferendis aut fugiat non, ex pariatur excepturi odio aspernatur libero saepe ducimus rem magni cumque. Laboriosam nisi fuga accusantium quos qui? Maiores ratione aliquam eos odio eius molestiae nesciunt exercitationem dolor perspiciatis quam. Necessitatibus rem nihil ad culpa, tenetur iusto consectetur rerum, delectus neque? Error, quas, eaque! Quibusdam voluptas expedita possimus consequatur accusantium distinctio, esse quisquam, ipsa blanditiis, officia perferendis et? Iste, nam optio vero earum tenetur voluptatibus modi a, odit aliquid eos corporis nulla saepe vel neque voluptate ratione, facilis quo sed nisi voluptates nostrum dolor. Non mollitia dignissimos laudantium quos libero nisi, nobis harum, asperiores soluta reprehenderit doloremque ipsa id unde voluptates beatae deserunt. Minima repellendus ipsam molestias veritatis pariatur nobis nihil, alias quasi, esse, aspernatur saepe beatae, hic consequatur. Sit sequi, libero quisquam quibusdam fuga tempore ab molestiae praesentium, necessitatibus, vero odio ullam qui non totam voluptas reprehenderit ad neque voluptate. Nam atque impedit ducimus, dolore reiciendis delectus inventore beatae cumque. Magni, id quos officiis soluta consequatur nam quis, modi fugit adipisci vel autem dolorum iusto cumque, libero reprehenderit amet doloremque voluptatem sunt sapiente reiciendis omnis, similique nulla enim. Autem repellendus, illo eveniet recusandae quae quibusdam itaque, delectus, consequatur provident vitae vero magnam repudiandae fugit, placeat sapiente! Omnis, possimus natus obcaecati sunt harum impedit, veniam quae numquam cum eos. Suscipit nihil totam itaque odio assumenda nemo? Eos iusto voluptas, consectetur sit totam velit fuga ea impedit laboriosam, dignissimos neque ipsum! Nostrum, recusandae. Autem sit aperiam culpa neque quaerat, voluptatibus repellendus. Magnam voluptatem illo quidem sapiente, nemo neque temporibus unde harum mollitia sit dignissimos eligendi accusantium, deserunt numquam, recusandae aperiam iure vero tenetur ea suscipit. Necessitatibus vel, omnis praesentium pariatur officia! Odio maxime dolor vitae ab deleniti et accusantium, iure molestiae eaque soluta sequi, autem, quae ex labore hic dicta temporibus quibusdam animi modi qui necessitatibus nulla. Perspiciatis molestiae architecto culpa quaerat amet fuga, fugiat laboriosam tempore at adipisci, tempora laborum ducimus alias corporis beatae dolor repellendus reiciendis aut cum. Quos enim quae dolores voluptates deleniti est eum beatae impedit unde quidem cumque, labore, quod a asperiores tempora vel blanditiis? Facere corporis mollitia vitae! Exercitationem esse perferendis, et aliquid iste saepe, quos, qui dolore est facere porro. Sapiente nesciunt, ad nostrum hic optio omnis libero autem minus eius, perferendis numquam adipisci corporis nisi ipsa assumenda possimus repudiandae distinctio vel accusamus quam animi esse eos natus pariatur. Molestiae in temporibus ipsum, eveniet itaque minus facilis magnam corporis amet, aspernatur ducimus iste quis numquam laudantium saepe optio nam nisi dolore necessitatibus perferendis hic non ea labore. Impedit rerum laudantium amet aperiam. Debitis tenetur veniam molestiae ab labore maxime incidunt iste commodi recusandae, adipisci obcaecati, molestias placeat aperiam atque, dolorum facere quae nesciunt. Facere aspernatur dolore consequatur tempora veritatis qui et eos quo voluptatum ipsum nemo rerum debitis nostrum, atque ratione aliquam nulla cumque aperiam officiis? Corporis a sunt, quis vel, quae molestias vitae recusandae magni! Nostrum animi totam dolore nemo voluptatem? Nihil consequuntur corrupti quaerat quis dolorum! Culpa, at quibusdam, saepe quas accusamus sequi tempore molestiae perferendis error fugiat, in totam laboriosam. Mollitia necessitatibus eius nisi, blanditiis rem commodi doloremque dicta, hic cumque quod possimus, obcaecati nesciunt deserunt. Vel id quas aliquam, fugiat repellendus perferendis voluptate consectetur deleniti cumque harum odit dolores ducimus facere? Mollitia qui dolore ut quod facere, recusandae repellendus debitis minus aliquid delectus inventore numquam ipsam fugit doloribus, voluptatum, earum eveniet ipsa, impedit fuga! Illo ipsa dolor id enim facere ipsam similique consectetur porro sequi ea perspiciatis soluta provident, ex amet nulla quos sit. Rerum nam, odit dignissimos! Delectus, corporis perspiciatis magni tempore praesentium dolorem magnam architecto earum animi, vero, obcaecati alias distinctio quae eligendi eos doloremque assumenda. Neque temporibus doloremque, natus deserunt ipsam repellendus. Dolorum consequuntur culpa esse modi adipisci, rem natus at fuga id, architecto delectus! Culpa quaerat nulla magnam sint repudiandae, impedit quisquam iure illum, natus at nesciunt fuga obcaecati excepturi fugiat ea sed repellendus repellat aliquid vel, sunt dolores quae. Omnis nulla soluta natus consequuntur tempore, in esse autem reprehenderit cum totam fugit voluptate libero hic asperiores perspiciatis a, odio voluptatibus non alias inventore delectus impedit praesentium doloribus. Veritatis qui adipisci quisquam voluptates, similique consequatur repudiandae dignissimos accusantium rerum beatae fuga inventore. Sequi soluta maxime facere laudantium sint quae ab, dolores provident doloremque maiores quo eaque commodi veritatis, eligendi illo ipsum. Suscipit, veniam, cumque quidem, distinctio debitis magnam nesciunt dolore reiciendis minus accusantium quod ullam eaque magni. Adipisci debitis a, repellat suscipit doloribus officiis asperiores vero veritatis aliquam praesentium nihil corrupti, ipsam. Quae esse hic fugit, in harum illum laboriosam odio mollitia at dolor nam quisquam aperiam quidem error vero voluptatibus, quos dolorem ratione odit illo libero unde sunt distinctio rerum! Repellat omnis dolorum fuga dolor, molestias earum. Iure, repellendus quae nostrum temporibus odio ad. Nihil quidem enim unde nesciunt, velit esse eveniet nisi architecto ad perferendis obcaecati eum iste ipsum eligendi ut necessitatibus veritatis officiis minus non laborum. Tempore explicabo nostrum nihil. Sed eius, iure nisi saepe. Neque eaque, consectetur nostrum aliquam amet praesentium, dicta excepturi ducimus voluptatibus illum consequatur, rerum veniam omnis eos enim. At asperiores, soluta sapiente amet. Ipsum in sint iusto, cumque possimus iure quia fugiat. Facere ratione consequuntur deleniti nisi, nostrum esse. Et amet deserunt unde aliquid, magni, incidunt fugiat illo neque consequatur eum cum, alias repellendus odit voluptate. Hic ducimus, quidem, excepturi delectus rerum placeat illo exercitationem nesciunt natus voluptatum modi sequi consectetur praesentium quae eaque mollitia! Architecto excepturi atque, molestias natus.
</p>
<div></div>
</section>如果您知道粘性元素的高度，那么您可以使用以下内容：
.sticky-element {
position: sticky;
top: calc(100vh - 50px);
}
这也适用于Stickyfill。虽然不确定浏览器支持。
body {
min-width: 600px;
min-height: 400px;
}
.container {
background-color: #9588c170;
/* , */
position: absolute;
width: 100%;
height: 100%;
/* overflow: scroll; */
overflow: auto;
}
.sticky {
width: 300px;
height: 200px;
background-color: #9588c1;
/* , */
position: sticky;
left: 1000px;
top: 900px;
}<div class="container">
<div class="sticky">div</div>
</div>使用以下html：
<div id="bottom-left">I'm in the bottom left!</div>
和以下css：
#bottom-left {
width: 250px;
height: 250px;
color: #fff;
background-color: #000;
position: fixed;
bottom: 0;
left: 0;
}
你应该在页面的左下角有一个粘性div
position:sticky;没有跨浏览器支持。看看this看看你可以给出的位置
从上面提供的链接：
财产价值
- static：默认值。元素按顺序呈现，因为它们出现在文档流中
- absolute：元素相对于其第一个定位（非静态）祖先元素定位
- 修复：元素相对于浏览器窗口定位
- relative：元素相对于其正常位置定位，因此“left：20”将20个像素添加到元素的LEFT 位置
- initial：将此属性设置为其默认值。阅读初始
- inherit：从其父元素继承此属性。阅读有关继承的信息
如果你想在父容器的底部有东西，你有2个选项。
position:relative;）。position:absolute;然后设置left，right，top和bottom属性。另一个选项（如果你希望该项永久保留在屏幕上的完全相同的位置 - 除非你添加js来改变它的属性）是使用position:fixed;然后再次设置left，right，top和bottom属性
检查this链接，查看选项之间的差异
如果您希望在这两个功能之间实现混合，则可以使用JavaScript / jQuery来实现此功能，使用滚动事件。这种方法（很可能）具有跨浏览器支持