我正在尝试创建一个包含隐藏文本的页面，只有当有人滚动时才会显示。
当某人滚动经过一个div时，该文本应该消失，而新的文本将显示出来。
我只能找到垂直或水平滚动等解决方案。
我已经使用jsFiddle创建了一个simpler version，但是无论我向JS部分添加什么代码，似乎都不起作用。

以下是CSS：

body {
    background-color: #f8f8f8;
    margin: 5px;
    font-family: arial, sans-serif;
}

div#mainText {
    width: 960px;
    margin: o auto;
    padding: 10px;
    background-color: #f8f8f8;
    font-size: 1em;
}

h1 {
    text-transform:uppercase;
    color: gray;
}

h2 {
    font-family:"Times New Roman", Times, serif;
    font-size:2.5em;
}

.partOne
{
    color: gray;
    display:none;
}

.partTwo
{
    color: gray;
    display:none;
}

.partThree
{
    color: gray;
    display:none;
}

.kicker
{
    color: gray;
    display:none;
}

以下是HTML：

<h1 id="preHead">Catchy Title</h1>
<h2 id="headline">Headline goes here</h2>
<P></p>
<p id="introBlurb">A very compelling blurb here. Praesent volutpat rhoncus purus,         ullamcorper dapibus ante pulvinar non. Maecenas fringilla justo nec justo blandit non rhoncus nunc elementum.</p>

<div class="partOne">
    <p>Part one here. This appears on first scroll event.</p>
</div>

<div class="partTwo">
    <p>Part two here. This appears on second scroll event.</p>
</div>   

<div class="kicker">
    <p>Kicker here. This appears on 3rd scroll event.</p>
</div>​

JavaScript/Jquery：

$(window).scroll(function () { 
    $("kicker").css("display"); 
});

到目前为止还没什么效果。任何帮助都非常感谢。