jquery - 使用位置 :fixed to align div relatively to 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/

要点是，我需要一个粘性 block ，它将紧跟在内容 block 之后并随整个页面滚动，并且如果窗口正在调整大小时它应该留在原处。

有没有什么方法可以使用纯 css 来实现，因为我认为那样的 JS 会导致页面性能低下。

Answer 1

位置有一个新值:

position:sticky

注意:Browser support目前仅限于 Firefox 和 safari

FIDDLE (适用于 Firefox 和 Safari)

请注意 top:0; 已设置，但粘性 div 并未位于视口(viewport)的顶部

.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;
}

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