誰かがスクロールしたときにのみ表示される非表示のテキストを含むページを作成しようとしています。
誰かが をスクロールするdiv
と、そのテキストが消え、新しいテキストが表示されます。
垂直方向または水平方向のスクロールなどの解決策しか見つけることができませんでした。
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");
});
これまでのところ何も機能していません。どんな助けでも大歓迎です。