我应该对位置有什么期望：粘性;底部：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.

You're close. Sticky positioning means that the aside will hug the bottom of the viewport, but only when it would otherwise exceed the bounds of the viewport. Otherwise, it will behave like a regular, relatively positioned box. This is what distinguishes position: sticky from position: fixed — the latter means the box always hugs the bottom of the viewport, regardless of its surrounding layout and of the scroll position.

Because both your article and aside are floating, the aside element doesn't ever get pushed past the bottom of the viewport, and so it doesn't get a chance to stick to the viewport.

Removing the float declaration from the article element — thereby keeping it in the flow — allows it to push the aside beyond the viewport. Note that if the aside is taller than the viewport (depending on how you view the snippet), a bottom sticky position will scroll as far as it needs to get 30px (the value of bottom) away from the viewport before it begins to stick, after which it will scroll away once the bottom of its containing block (the section) exceeds 30px distance from the viewport.

* {
  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>