我怎样才能修复这个帕拉拉克斯

Question

这是我第一次在jQuery中使用视差类型的东西...我已经到了崩溃的边缘，我不知道如何解决它。

点击这里查看JSFiddle

我的代码是....HTML

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

爪哇语

 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

#bannerText { position: fixed; top: 250px; text-align: center; width: 100%; }

我试图做到这一点，当用户向下滚动时，文本会随着它们缓慢下降（但比它们慢，因此它会离开屏幕）并使其淡出。

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

编辑：试图让它有点像这个网站，例如，点击这里

Answer 1

这是一个工作示例

您可以使用参数来获得所需的效果。 一定要在你的页面中包含jQuery，就像这个小提琴一样：

$(window).on('scroll', function() {
    //Get the scoll position of the page
    scrollPos = $(this).scrollTop();
    //Scroll and fade out the banner text
    $('#bannerText').css({
      'margin-top' : (scrollPos/3)+"px",
      'opacity' : 1-(scrollPos/100)
    });
});

Answer 2

试试这个演示

     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();
});

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

CSS：

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