我对 position: sticky; 有什么期望？底部：30px；？

Question

我应该期待什么？我希望 aside 在您向下滚动时抓住视口底部 30px。

您需要在 Firefox 中运行这个，因为它是唯一支持 position: sticky.

的浏览器

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  line-height: 1.5;
  color: #fff;
  padding: 3rem;
}
p {
  padding: 30px;
}
img {
  max-width: 100%;
  display: block;
  margin-bottom: 30px;
}
img:last-of-type {
  margin-bottom: 0;
}
section {
  background: #00ff7f;
  max-width: 700px;
  min-height: 1000px;
  margin: auto auto 30px;
}
section:after {
  content: '';
  display: table;
  clear: both;
}
article {
  background: #1e90ff;
  padding: 30px;
  float: left;
  width: calc(100% * 2 / 3 - 30px);
  margin-right: 30px;
}
aside {
  background: #ff6347;
  float: left;
  width: calc(100% * 1 / 3);
  position: -webkit-sticky;
  position: sticky;
  bottom: 30px;
}

<section>
    <article>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, quas? Maxime dolore explicabo nostrum quidem suscipit eveniet libero quam voluptatibus, recusandae exercitationem assumenda voluptates nulla vel temporibus, fuga possimus dolores officiis veritatis quae maiores nisi impedit itaque? Quos optio libero, non nostrum iste, quo natus ex, eos sint itaque omnis? Illum eos, ducimus accusamus totam quasi consequuntur consectetur excepturi temporibus blanditiis aut laborum esse dolorum modi, explicabo illo eligendi cum architecto veniam?  
    </article>
    <aside>
        <img src="http://placekitten.com/404/404">
        <img src="http://placekitten.com/404/404">
        <img src="http://placekitten.com/404/404">
    </aside>
</section>
<section>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sunt, unde fuga, ex tempora nam molestiae autem maiores ducimus, debitis, impedit mollitia laboriosam! Nulla esse voluptatibus laudantium ipsa illo adipisci pariatur, nostrum perferendis quo saepe magnam, veritatis commodi doloribus inventore aspernatur cupiditate assumenda. Cupiditate porro dolorum quo magni ipsum adipisci sit repellendus dolore voluptatibus, omnis enim unde velit quidem expedita iusto modi maxime placeat reprehenderit dignissimos fuga ad atque soluta. Soluta velit natus qui ad hic suscipit dolorum vitae minus quisquam necessitatibus asperiores illum sed dolorem debitis, laborum, praesentium quos dicta molestiae. Iusto animi perferendis dignissimos ut necessitatibus nostrum earum pariatur velit reiciendis quibusdam veritatis neque saepe, mollitia, unde ab ipsam. 
    </p>
</section>

http://codepen.io/corysimmons/pen/adjabm?editors=1100

Answer 1

I expect the aside to grab the bottom of the viewport by 30px as you scroll down.

你很接近。粘性定位意味着 aside 将紧贴视口的底部，但仅当超出视口的边界时。否则，它将表现得像一个常规的、相对定位的盒子。这就是 position: sticky 与 position: fixed 的区别——后者意味着框总是紧贴视口底部，无论其周围布局和滚动位置如何。

因为你的 article 和 aside 都是浮动的，所以 aside 元素永远不会被推过视口的底部，所以它不会得到有机会坚持视口。

从 article 元素中删除 float 声明——从而使其保持在流中——允许它把 aside 推到视口之外。请注意，如果 aside 比视口高（取决于您查看代码段的方式），底部粘性位置将滚动到它需要的距离 30px（bottom 的值）它开始粘附之前的视口，之后一旦其包含块（section）的底部距离视口超过 30px 距离，它将滚动离开。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  line-height: 1.5;
  color: #fff;
  padding: 3rem;
}
p {
  padding: 30px;
}
img {
  max-width: 100%;
  display: block;
  margin-bottom: 30px;
}
img:last-of-type {
  margin-bottom: 0;
}
section {
  background: #00ff7f;
  max-width: 700px;
  margin: auto auto 30px;
}
section:after {
  content: '';
  display: table;
  clear: both;
}
article {
  background: #1e90ff;
  padding: 30px;
  width: calc(100% * 2 / 3 - 30px);
  margin-right: 30px;
}
aside {
  background: #ff6347;
  float: left;
  width: calc(100% * 1 / 3);
  position: -webkit-sticky;
  position: sticky;
  bottom: 30px;
}

<section>
    <article>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, quas? Maxime dolore explicabo nostrum quidem suscipit eveniet libero quam voluptatibus, recusandae exercitationem assumenda voluptates nulla vel temporibus, fuga possimus dolores officiis veritatis quae maiores nisi impedit itaque? Quos optio libero, non nostrum iste, quo natus ex, eos sint itaque omnis? Illum eos, ducimus accusamus totam quasi consequuntur consectetur excepturi temporibus blanditiis aut laborum esse dolorum modi, explicabo illo eligendi cum architecto veniam?  
    </article>
    <aside>
        <img src="http://placekitten.com/404/404">
        <img src="http://placekitten.com/404/404">
        <img src="http://placekitten.com/404/404">
    </aside>
</section>
<section>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur sunt, unde fuga, ex tempora nam molestiae autem maiores ducimus, debitis, impedit mollitia laboriosam! Nulla esse voluptatibus laudantium ipsa illo adipisci pariatur, nostrum perferendis quo saepe magnam, veritatis commodi doloribus inventore aspernatur cupiditate assumenda. Cupiditate porro dolorum quo magni ipsum adipisci sit repellendus dolore voluptatibus, omnis enim unde velit quidem expedita iusto modi maxime placeat reprehenderit dignissimos fuga ad atque soluta. Soluta velit natus qui ad hic suscipit dolorum vitae minus quisquam necessitatibus asperiores illum sed dolorem debitis, laborum, praesentium quos dicta molestiae. Iusto animi perferendis dignissimos ut necessitatibus nostrum earum pariatur velit reiciendis quibusdam veritatis neque saepe, mollitia, unde ab ipsam. 
    </p>
</section>

我对 position: sticky; 有什么期望？底部：30px；？

What should I expect with position: sticky; bottom: 30px;?

css

css-position