Using JavaScript/JQuery to display text only on scroll event

Question

I am trying to create a page that contains hidden text that is only revealed when someone scrolls.

As someone scrolls past a div, that text should disappear, while the new text is revealed.

I only was able to find solutions for scroll vertically or horizontally, etc.

I have created a simpler version of this using jsFiddle, but not matter what code I add to the JS part, nothing seems to work.

Here is the 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;
}

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

Nothing's worked so far. Any help is greatly appreciated.

what you mean by "1st,2nd,3rd scroll events" ? scroll generate several tens of events per second when you scrolling — zb', Dec 21 '12 at 23:27
Not to mention you're selecting on an element, not a class. use `$(".kicker")` — Apropos, Dec 21 '12 at 23:29
you're right. my actual page has a lot more text at each div so there would be scrolling involved. what i meant by first scroll is that i want each part to be revealed as people get toward the bottom of each div, perhaps with some sort of anchor. — user1922698, Dec 21 '12 at 23:38
thanks...and i have tried $(".kicker") but didn't seem to work either. i will try again. — user1922698, Dec 21 '12 at 23:40
i just updated the jsfiddle with more text and $(".kicker"). thx — user1922698, Dec 21 '12 at 23:42
The `.css('display')` is simply a getter for the css property. It won't have any effect. Check my answer for a working example at http://jsfiddle.net/x8tzg/24/ — Ryan Endacott, Dec 21 '12 at 23:44

score 1 · Answer 1 · edited May 23 '17 at 11:56

Your example wasn't long enough to scroll, so I added some extra text in the first element. The main issue was with your jQuery. You were calling $('kicker').css('display') which didn't work.

The selector 'kicker' needed to be changed to '.kicker' because it was a class, and I changed .css('display') to be .show() which worked correctly.

Working example: http://jsfiddle.net/x8tzg/24/

Note: If you want to detect when a certain scroll point is reached, you can add code in the scroll event to check the $(window).scrollTop() compared to $(compareElement).offset().top as mentioned here: Have a div cling to top of screen if scrolled down past it.

Thank you. that worked in the jsfiddle site. much appreciated. — user1922698, Dec 22 '12 at 00:13

Using JavaScript/JQuery to display text only on scroll event

1 Answers1