Question

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

当有人滚过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"); 
});

到目前为止，没有任何工作。非常感谢任何帮助。

Answer 1

你的例子不够滚动，所以我在第一个元素中添加了一些额外的文本。主要问题是你的jQuery。你打电话给$('kicker').css('display')这是行不通的。

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

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

注意：如果您想要检测何时达到某个滚动点，您可以在scroll事件中添加代码，以检查$(window).scrollTop()与此处提到的$(compareElement).offset().top进行比较：{ {3}}

使用JavaScript / JQuery仅在滚动事件上显示文本

1 个答案: