使用JavaScript/jQuery來只在滾動事件

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"); 
}); 

諾斯ing迄今爲止工作。任何幫助是極大的讚賞。

Answer 1

你舉的例子不夠長滾動，所以我加入的第一個元素一些額外的文本。主要的問題是你的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。