用绝对元素固定的模拟位置

Question

尝试模拟位置固定（因为我需要background-attachment: fixed对div的影响）而且我似乎无法使其表现得足够好用。

我尝试过多种变体，使用变换代替top，使用requestAnimationFrame来减轻抖动，但是它们都会遇到同样的问题。

如果你查看下面的小提琴，你会看到它是如何工作的，但它非常跳跃/迟钝。有可能以某种方式解决这个问题吗？

＆＃13;

＆＃13;

var el = document.getElementsByClassName('shape')[0];
var poffset = el.parentNode.offsetTop;
var scroll;

window.addEventListener('scroll', function(){
	scroll = window.pageYOffset;
  poffset = el.parentNode.offsetTop;
	raf();
});

function raf(){
	
  el.style.transform = 'translateY('+parseInt(scroll-poffset)+'px)';
	
	// requestAnimationFrame(raf);
}
raf();

＆＃13;

.content {
	height: 100vh;
	background-color: #ace;
}

.fixed {
	height: 100vh;
	overflow: hidden;
	position: relative;
}

.shape {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px;
	margin-top: -150px;
	margin-left: -150px;
	background-color: #bada55;
	border-radius: 20%;
}

＆＃13;

<div class='content'>

</div>
<div class="fixed">
	<i class="shape"></i>
</div>
<div class="content">
</div>

＆＃13;

＆＃13;

＆＃13;