Start a javascript function only on a particular section [duplicate]

Question

I'm making a one page website which has two sections. I've added typewriter effect(something like this- codepen.io/danielgroen/pen/VeRPOq ) to the second section of the website. However, this effect starts once the page is loaded. How to start the effect only when I scroll to the second section?

<section>
 <div> 
   <p> hi how are you? </p>
 </div>
</section>
<section>
<h1> Hallo, Wij zijn Occhio! </h1>
</section>

Listen to the document scroll event and check the position of your section — fdomn-m
– fdomn-m, Commented Jun 28, 2017 at 10:40

Chiller · Accepted Answer · 2017-06-28 10:40:52Z

1

You can run your effect when you scroll the window and when you reach the second section

$(window).scroll(function() { 

      if ($(window).scrollTop() >  $("section:nth-of-type(2)").offset().top) {
             // run your effect here
      }

});

answered Jun 28, 2017 at 10:40

Chiller

9,7362 gold badges30 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

nafri Over a year ago

codepen.io/anon/pen/YQYGBN Like this? Sorry I'm a noob

Chiller Over a year ago

@nafri i don't understand the question?

nafri Over a year ago

I added the above lines to the code but the animation stops working codepen.io/anon/pen/YQYGBN

Chiller Over a year ago

@nafri look at this codepen.io/anon/pen/eRygbV.. scroll to the second section to see the effect

nafri Over a year ago

Thanks! But after the word 'amsterdam', the animation starts shivering due to some glitch

Collectives™ on Stack Overflow

Start a javascript function only on a particular section [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related