Javascript 我怎样才能修好这个parralax

这是我第一次在jQuery中使用视差类型的东西。。。 我已经到了一个临界点，我不知道如何修复它

我的代码是。。。 HTML

文本，废话废话

Javascript

 function scrollBanner() {
//Get the scoll position of the page
scrollPos = jQuery(this).scrollTop();

//Scroll and fade out the banner text
jQuery('#bannerText').css({
  'margin-top' : -(scrollPos/3)+"px",
  'opacity' : 1-(scrollPos/300)
});
 }

CSS

#banner文本{
位置：固定；
顶部：250px；
文本对齐：居中；
宽度：100%；
}

我试图让它成为这样，当用户向下滚动时，文本会随着他们慢慢地向下移动（但比他们慢，所以它会离开屏幕）并逐渐消失

现在，它做得很好，什么都没有。屏幕上只有我的文字

---

编辑：

以下是一个工作示例

您可以使用参数来获得想要的效果。请确保在页面中也包括jQuery，如：

试试这个

HTML

  <div id="bannerText" style="margin-top: 0px; opacity: 1;">
    <center><h1 id='txt'>Text, blah blah blah</h1></center>
</div>

<div id="expander"></div>

     function scrollBanner() {
    //Get the scoll position of the page
    scrollPos = jQuery(this).scrollTop();

    //Scroll and fade out the banner text
    jQuery('#txt').css({
      'margin-top' : -(scrollPos/3)+"px",
      'opacity' : 1-(scrollPos/500)
    });
     }

$(document).scroll(function(){
scrollBanner();

});

  <div id="bannerText" style="margin-top: 0px; opacity: 1;">
    <center><h1 id='txt'>Text, blah blah blah</h1></center>
</div>

<div id="expander"></div>

#bannerText {
position: fixed;
top: 250px;
text-align: center;
width: 100%;
  height:300px;
  background:orange;
  overflow:hidden;
}

#expander{
    position:absolute;
    width:100%;
    height:30000px;

}
#txt{
position:fixed;
  top:500px;
}