视差滚动不考虑当前位置

Question

我的横幅中有一个元素，其中包含我的横幅文字。我希望这个元素能够滚动到网站的其他部分。这是元素：

 <div id="parallax-banner" class="header-content-container">
        {{ widget_data.banner_content.html }}
    </div>

css：

.header-content-container {
max-width: 680px;
text-align: center;
color: {{ lightFontColor }};
position: fixed;
z-index: 5;
left: 50%;
margin: auto;  
margin-left: -340px;
margin-top: -96px;

}

和js：

document.getElementById("parallax-banner").style.top = '57%';

function parallax() {
    var paraScrollElement = document.getElementById("parallax-banner");

    paraScrollElement.style.top =- (window.pageYOffset / 15)+'%';

}

window.addEventListener("scroll", parallax, false);

当您加载页面时，元素位于我想要的位置。滚动后，它会跳到屏幕顶部。滚动的顶部位置从那里开始改变，所以它正在按照我想要的方式工作，除了它没有考虑滚动事件的初始顶部位置。