位置：粘到左下角

Question

我刚刚在FF32＆amp; 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即可。这不应该有用吗？

我认为将一些东西粘在底部是一个有效的用例，就像人们想要贴在顶部的东西一样。 在我们的例子中，因为我感兴趣的是在水平滚动上有一些粘性，但我希望这个元素位于父元素的底部。

无论如何，欢迎任何建议和额外信息。

Answer 1

position: sticky;
bottom: 30px;

确实有效。请记住sticky元素与其父元素相关。

http://codepen.io/corysimmons/pen/QyBMXN?editors=1100（在Firefox中）

在这种情况下，<section>（蓝色区域）是父级。

尽管https://github.com/wilddeer/stickyfill#what-it-doesnt

，但它不适用于Stickyfill

我建议你再玩一会儿，直到你掌握它为止。

如果您需要一个行为类似position: sticky的JS插件而不必使用position: sticky（无法等待浏览器支持或更强大的填充），请告诉我。

Answer 2

用position: sticky考虑元素的方式如下：

“具有position: sticky的商品应始终保留在其父商品的正常位置，除非所说的正常地点不在视口之外，在这种情况下，粘性商品应相对固定到视口。如果父容器也离开视口，则所有赌注都将关闭，在这种情况下，粘性项目将随其一起滚动走。”

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>

Answer 3

如果您知道粘性元素的高度，那么您可以使用以下内容：

.sticky-element {
  position: sticky;
  top: calc(100vh - 50px);
}

这也适用于Stickyfill。虽然不确定浏览器支持。

Answer 4

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>

Answer 5

.sticky-container {
  position: sticky;
  top: 100vh; // push it to the bottom from top
  transform: translateY(-100%); // move it up again depending on its own height
  width: 100%;
  background: white;
  padding: 20px 0;
}

Answer 6

position:sticky;没有跨浏览器支持。查看this以查看您可以给出的位置

从上面提供的链接：

  

属性值

     

  
• static ：默认值。元素按顺序呈现，因为它们出现在文档流程
中   
• 绝对：元素相对于其第一个定位（非静态）祖先元素定位
  
• fixed ：元素相对于浏览器窗口定位
  
• relative ：元素相对于其正常位置定位，因此＆＃34; left：20＆＃34;为元素的左侧增加20个像素   位置
  
• initial ：将此属性设置为其默认值。阅读初始
  
• inherit ：从其父元素继承此属性。阅读有关继承的信息
  

如果您想要父容器底部的内容，您有2个选项。

1. 第一种是简单地命令你的元素允许特定元素成为其父元素的最后一个子元素（如果你不设置position属性，将使用它的默认值：position:relative;）。
2. 第二个选项是使用position:absolute;，然后设置左，右，顶部和底部属性。

另一个选项（如果您希望该项永久保留在屏幕上的完全相同的位置 - 除非您添加js以更改其属性）是使用position:fixed;然后再次设置左，右，顶部和底部属性

检查this链接以查看选项之间的差异

如果您希望在这两个功能之间实现混合，可以使用JavaScript / jQuery来实现此功能，使用滚动事件。这种方法（很可能）具有跨浏览器支持

Answer 7

使用以下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

示例：http://jsfiddle.net/wjxws9hy/