0

我正在尝试创建一个包含隐藏文本的页面，该隐藏文本仅在有人滚动时才会显示。

当有人滚动经过 adiv时，该文本应该消失，而新文本会显示出来。

我只能找到垂直或水平滚动等的解决方案。

我使用 jsFiddle 创建了一个更简单的版本，但无论我在 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"); 
});

到目前为止没有任何工作。任何帮助是极大的赞赏。

4

1 回答 1

0

您的示例不够长，无法滚动，因此我在第一个元素中添加了一些额外的文本。主要问题是您的 jQuery。你打电话没用$('kicker').css('display')。

选择器'kicker'需要更改为，'.kicker'因为它是一个类，而我更改.css('display')为.show()正常工作的。

工作示例：http: //jsfiddle.net/x8tzg/24/

注意：如果您想检测何时到达某个滚动点，您可以在scroll事件中添加代码以检查$(window).scrollTop()与$(compareElement).offset().top此处提到的比较：如果向下滚动超过它，则让 div 紧贴屏幕顶部。

于 2012-12-21T23:36:36.350 回答