使用pos：fixed将div对齐div

Question

我需要用位置创建div：固定相对于父div，而不是窗口。 我知道用JS可以很容易地实现它，例如：

function sticky() {
    $('.sticky').css({ //sticky block
        left : $('.container').offset().left + parseInt($('.container').css('width'))
    });
}

sticky();

$(window).resize(function() {
    sticky();
});

JSFiddle：http://jsfiddle.net/zcqbsrzf/

重点是，我需要一个粘性块，它将在内容块和整页滚动后立即定位，如果窗口正在调整大小，它应该保留在它的位置。

有没有办法用纯css来实现这个目标，因为我认为这样的JS会导致页面性能低下。

Answer 1

位置有一个新值：

position:sticky

注意：Browser support目前仅限于Firefox和Safari

FIDDLE （适用于Firefox和Safari）

请注意top:0;已设置，但粘性div不位于视口顶部

＆＃13;

＆＃13;

.container {
  width: 400px;
  height: 5000px;
  background: gray;
  position: relative;
  color: #fff;
  margin-top: 50px;
}
.sticky {
  width: 100px;
  height: 100px;
  margin-right: -100px;
  float: right;
  position: -webkit-sticky;
  position: sticky; /* <---- */
  background: green;
  color: #fff;
  top: 0;
}

＆＃13;

<div class="container">container
  <div class="sticky">sticky
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;