Javascript 视差滚动顶部

我需要一些视差滚动的帮助。我正在尝试将一个图像粘贴到顶部div的底部

function parallax() {
var scrollPosition = jQuery(window).scrollTop();
jQuery('#grid').css('top', (0 - (scrollPosition * .5))+'px' );
}

现在滚动时，它会粘在浏览器窗口的顶部。我使用了更高的数字，比如

jQuery（'#grid'）.css（'top'，（134-（scrollPosition*.5））+'px'）

这在页面加载时为我提供了适当的间距，但只要我滚动，就可以在div顶部看到白色。我不太熟悉jQuery，因此希望您能提供帮助

基本上，如何将div的顶部位置分配给变量
scrollPosition

/*更新*/
对不起，这里有一些关于这个问题的详细信息

这是一个

看到了吗？粘在窗顶上了吗？我想让它粘在标题的底部
 您可能正在使用
绝对定位。将此更改为
fixed
，并且
top
应始终为
0px
。那会解决你的问题。这是一个例子。不需要javascript就可以工作。
我正在写一个新的答案，因为我以前不太理解你。你需要背景从标题的底部开始，对吗

我这样做是因为忘记了绝对定位或固定定位，以及z指数。相反，我创建了一个包装div，以在头div之后包装所有内容。其余的都很好，不需要javascript。包装器将自动延伸到具有重复背景图像的页面末尾

这是：

CSS:

从css和html中删除#grid div

HTML:


标题
制作、出版及出版；A/B不带I.T.的测试登录页。
Lorem ipsum dolor sit amet，奉献精英。占有欲、智慧、智慧是否能被赋予光明？是的，你是说你的智商下降了吗？是的，我爱你，我爱你。占有欲、智慧、智慧是否能被赋予光明？是的，你是说你的智商下降了吗？塞佩

我爱你，我爱你。。。

并删除与滚动功能相关的所有js

在这里。
谢谢你的评论。位置是固定的，但它固定在浏览器窗口，而不是div的顶部。div也固定吗？显示一些html，我相信我们可以排序。把它放到JSFIDLE中。谢谢你的摆弄，但这不是我想要完成的。我正在尝试使用视差滚动，而不仅仅是修复顶栏。现在我明白了，你是不是每次滚动窗口时都调用这个视差函数？像
$（window'）。滚动（function（）{parallax（）；}）
您执行
（scrollPosition*.5）
的部分可能会出现一个
浮点
，其中
top
需要是一个
整数
。尝试使用
Math.round（）包装此部分所以尝试
Math.round（滚动位置*.5）如何调用视差（）
？是，
$（窗口）。在（'scroll'，视差）？我像这样调用jQuery（window.bind（'scroll'，function（e）{parallax（）；}）
#wrapper {
    padding:20px;
background: url('http://wpzombies.com/wp-content/uploads/2013/07/grid_bg.jpg') repeat top center;
}

<div class="header">
    <h1>A header</h1>
</div>
<div id="wrapper">
    <div class="optin">
        <div class="wrap">
            <div id="home-para">
                <h2 class="home">Build, publish &amp; A/B test landing pages without I.T.</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, sapiente, magni qui ab vero repudiandae beatae a illum sed? Eaque, esse placeat incidunt laudantium sapiente debitis commodi rerum minus? Saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, sapiente, magni qui ab vero repudiandae beatae a illum sed? Eaque, esse placeat incidunt laudantium sapiente debitis commodi rerum minus? Saepe.</p>
                <div id="opt-box">
                    <input type="email" /><a href="#" class="button orange">You can start here!</a>
                </div>
            </div>
        </div>
    </div>

    <div class="space">Lorem ipsum dolor sit amet...</div>
</div>