0

誰かがスクロールしたときにのみ表示される非表示のテキストを含むページを作成しようとしています。

誰かが をスクロールする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"); 
});

これまでのところ何も機能していません。どんな助けでも大歓迎です。

4

1 に答える 1

0

あなたの例はスクロールするのに十分な長さではなかったので、最初の要素に余分なテキストを追加しました. 主な問題は jQuery にありました。$('kicker').css('display')あなたはうまくいかなかったと呼んでいました。

セレクターはクラスだったので'kicker'変更する必要があり、正しく機能するように変更しました。'.kicker'.css('display').show()

作業例: http://jsfiddle.net/x8tzg/24/

注: 特定のスクロール ポイントに到達したことを検出する場合は、scrollイベントにコードを追加して、ここで説明したように$(window).scrollTop()比較を確認でき$(compareElement).offset().topます: Have a div cling to top of screen if scrolled down past it .

于 2012-12-21T23:36:36.350 に答える